React --- React 学习积累（个人）

1、不同于 Vue，React 中需要在 jsx 写表达式时，用单花括号，不带双引号。例如：<Person name={this.state.count} />；

2、每一个 constructor 里，都需要有一个 super( ) 声明，用来表示对父类的继承，否则会报错；

3、对于 state 的修改，只有一种方式：this.setState( { propertyName: value } )，而且 state 一定用在有状态的组件中；

4、<input defaultValue = {props.name} /> 这里不能再用 value；

5、有状态组件和无状态组件的区别【*】：

1）有状态组件里能使用 state，无状态组件里不能用 state；

2）有状态组件里调用属性需要 this.props，无状态组件中不能使用 this；

3）有状态组件里有生命周期，无状态组件没有生命周期一说；

6、生命周期钩子函数（加载相关的4个）【*】

1）constructor --- 这里一般用来初始化 state，传递 props，调用 super( )；

2）componentWillMount --- 组件即将要生成，执行启动页逻辑，可以在这里修改状态；

3）render --- 创建 virtual dom，将 jsx 解析为 javascript 和 html，并更新 dom。这里需要注意的是：render( ) 也会加载配套的子组件；

4）componentDidMount --- 组件渲染完毕，此时需要注意，不要再更新状态，容易陷入死循环。

7、构造函数中，不能使用 this.props.title，因为还不存在，其它生命周期构造函数可以。例如：render 中就已经存在了；

8、React 中只有组件要显示的时候，才会执行生命周期钩子函数；

9、生命周期钩子函数（更新触发相关的4个）【*】

1）componentWillReceiveProps(nextProps) --- 组件发生改变触发；

2）shouldComponentUpdate(nextProp, nextState) --- 返回false 不进入下一个阶段，返回true 进入下一个阶段；

3）componentWillUpdate(nextProp, nextState) ；

4）render( )；

5）componentDidUpdate( )；

10、生命周期钩子函数（卸载相关的1个）【*】

componentWillUnmount( )；

11、查看全局安装的 create-react-app 的方式： npm ls create-react-app -g；