React学习笔记

1. function 和 class 的区别
   来自React官网的解释

   State is similar to props, but it is private and fully controlled by the component.
   We mentioned before that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.

   自己的总结
   函数和类组件的区别在于，类组件拥有私有的可完全控制的state
   1. 函数组件不会被实例化，整体渲染性能得到提升
   因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升
   2. 函数组件中无法使用this
   无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件
   3. 组件无法访问生命周期的方法
   因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
   4. 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

   无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件。

2. 组件的准则

   1. All React components must act like pure functions with respect to their props.

3. lifecycle

   • constructor( 不是生命周期函数，但是是组件初始化的第一步)
   • componentWillMount
   • render( 不是生命周期函数，但是是组件DOM渲染的必须步骤 )
   • componentDidMount
   • shouldComponentUpdate
     必须返回一个true/false, true表示组件继续更新， false表示组件不更新
   • componentWillUpdate
   • render(不是生命周期函数，但是是组件DOM渲染的必须步骤)
   • componentDidUpdate
   • componentWillUnmount 组件实例将要销毁时调用
   • componentWillReceiveProps 组件接受的属性变更时触发

4. 进行setState时，什么时候使用函数模式，什么时候使用对象模式
   参考https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

   React may batch multiple setState() calls into a single update for performance.
   Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

   当属性的变更涉及当前组件的私有属性时，需要使用函数模式，因为出于性能考 虑，组件中的state的更新是异步的，使用对象模式更新时获取到的属性值未必是之前的操作计算后的准确值。

5. 组件的单向数据流 top-down | unidirectional
   参考https://reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down
   数据只能从父组件到子组件。

6. map循环中子项key为什么不建议使用index
   因为react是使用key来标记列表中的dom，当使用index来标记时，由于index是依据数据在数组中的位置获取的，当数组中的数据顺序发生变化时，index也会发生变化。比如有一个列表数据，当我我想在列表的开头处插入数据时，该条数据的key将为0，但是之前渲染的数据中已经有了0，那么新数据就与老数据就会产生混淆。所以，当涉及列表数据变化时，不要使用index作为key.

   参考以下文章

   1. https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318。
   2. https://reactjs.org/docs/reconciliation.html#keys

本文持续更新中。