react精髓（react 技巧）

大家好，我是讯享网，很高兴认识大家。

 <div id="navCategory"></div><p>学和使用react有一年多了，最近想在梳理一下react基础知识,夯实基础，激流勇进~<br />

讯享网

关于reacr-router,redux,redux-saga后续都会慢慢输出，希望各位看官老爷持续关注~要是能给个赞鼓励一下就更赞了

react基础知识速览

6、将元素渲染进DOM

组件（component）能够将UI划分为独立的、可复用的部分，这样我们就只需专注于构建每一个单独的部件。
从概念上看，组件就像是函数：接受任意的输入（称为属性，Props），返回React元素。React中有两种定义组件的方式：函数定义和类定义

1、函数定义组件

2、类定义组件

这种方式比起函数定义方式则更加灵活

3、组件渲染

最终就会以<h1>Hello, 张不怂</h1>的方式呈现。在这个过程中，发生了如下的事情：

对<Welcome name="张不怂" />元素调用了ReactDOM.render()丰富
React将{ name: '张不怂' }作为props实参来调用Welcome组件
Welcome完成渲染，返回<h1>Hello, 张不怂</h1>元素
ReactDOM计算最小更新代价，然后更新DOM

4、组合组件

讯享网

5、属性是只读的

需要注意的有：

1、在类中加入state

2、生命周期

1）Mount 已插入真实DOM
2）Update 正在重新渲染
3）Unmount 已移出真实DOM

而相应的，生命周期钩子函数有：

componentWillMount
componentDidMount
componentWillUpdate(newProps, nextState)
componentDidUpdate(prevProps, prevState)
componentWillUnmount()

此外，还有两种特殊状态的处理函数：

componentWillReceiveProps(nextProps) 已加载的组件收到新的参数时调动
shouldComponentUpdate(nextProps, nextState) 组件判断是否重新渲染时调用

1）render()里用不到的state，不应该声明在state里
2）不能直接使用this.state.xxx = xxx的方式来改变一个state的值，应该使用this.setState()。如：

1）React事件使用camelCase命名（onClick），而不是全小写的形式（onclick）
2）使用JSX，传入的是事件的句柄，而不是一个字符串

注意：在使用事件回调函数的时候，我们需要特别注意this的指向问题，因为在React里，除了构造函数和生命周期钩子函数里会自动绑定this为当前组件外，其他的都不会自动绑定this的指向为当前组件，因此需要我们自己注意好this的绑定问题，
通常而言，在一个类方式声明的组件里使用事件回调，我们需要在组件的constructor里绑定回调方法的this指向，如：

1、使用变量来存储元素

2、使用&&运算符进行渲染

3、使用三目运算符进行渲染

4、阻止整个组件的渲染

当我们运行以上的代码的时候，会发现控制台提示：Each child in an array or iterator should have a unique "key" prop，因此，我们需要为列表项的每一个项分配一个key，来解决这个问题，通常而言，我们可以使用以下几种方式来提供key：

但是React不推荐在需要重新排序的列表里使用索引下标，因为会导致变得很慢。
注意：只有在一个项的同胞里区分彼此的时候，才需要使用到key，key不需要全局唯一，只需要在一个数组内部区分彼此时唯一便可。key的作用是给React一个提示，而不会传递给组件。如果我们在组件内需要同样的一个值，可以换个名字传递，如：

1、受控组件

2、多个输入的解决办法

3、非受控组件

1、首先定义转换函数

2、定义组件

1、包含关系

2、何时使用继承？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

react精髓（react 技巧）

相关推荐