【深入浅出React和Redux】读书笔记二:设计高质量的React组件

作为一个合格的开发者，不要只满足于编写可以运行的代码，而要了解代码背后的工作原理，不要只满足于自己编写的程序可以运行，还要让自己的代码可读而且易于维护，这样才能开发出高质量的组件。

2.1设计高质量React组件的原则和方法

划分组件边界的原则

React组件的数据种类

React组件的声明周期

易于维护组件的设计要素

高内聚：逻辑紧密相关的内容放在一个组件中

用户界面包含内容、交互行为和样式。内容由HTML表示，交互放在js代码中，样式放在css文件中，这虽然满足一个模块功能的需要，却要放在不同的三个文件不，这不满足高内聚的原则。

React不是这样，展示内容的JSX,定义行为的js代码，甚至定义样式的css都可以放在同一个js文件中，他们都是为了一个目的存在的，所有React天生具有高内聚的特点

低耦合：不同组件之间的依赖关系要弱化，组件尽量独立

保证整个系统的低耦合度，需要对系统的功能有充分认识，根据功能点划分模块，不同组件实现不同功能

2.2React组件的数据

差劲的程序员操心代码，优秀的程序员操心数据结构和他们之间的关系

如何组织数据是程序最重要的事情，react数据分为两种prop, state

prop

prop是从外部传递给组件的数据。state用于记录内部状态;

state

react组件不能修改传入的prop,需要记录自身数据变化，就要使用state.

直接改变state的值，只是野蛮的修改了state的值，没有驱动组件进行重新渲染，组件没有重新渲染，不会反应this.state的值改变了。setState函数所做的事，首先改变state的值，然后驱动组件更新，使得state的新的值出现在页面上

prop和state的对比

prop用于定义外部接口，state用于记录内部状态

prop的赋值在外部世界使用组件时，state的赋值在组件内部

组件不应该改变prop的值，state存在的目的是让组件来改变的

组件绝不应该去修改传入的 props 的值，假设父组件包含多个子组件，然后把一个 JavaScript 对象作为 props 值传给这一个子组件，而某个子组件居然改变了这个对象的内部值，那么，接下来其他子组件读取这个对象会得到什么值呢？当时读取了修改过的值，但是其他子组件是每次渲染都读取这个 props 的值呢？还是只读一次以后就用那个最初值呢？一切皆有可能，完全不可预料。也就是说，一个子组件去修改 props 中的值，可能让程序陷入一团混乱之中，这完全违背了 React 设计的初衷。

2.3组件的声明周期     

装载过程（Mount）,就是把组件第一次在DOM树中渲染的过程

更新过程（Update）,组件被重新渲染

卸载过程（Unmount）,组件从DOM中删除的过程  

旧声明周期

        1.初始化阶段：由ReactDOM.render()触发-初次渲染

            1.constructor()

            2.componentWillMount()

            3.render()

            4.componentDidMount()===>常用

                一般在这个钩子做一些初始化的事情，例如开启定时器、发送网络请求、订阅消息

        2.更新阶段由组件内部this.setState()或父组件render触发

            1.shouldComponentUpdata()

            2.componentWillUpdata

            3.render()

            4.componentDidUpdata

        3.卸载组件：由ReactDOM.unmountComponentAtNode()触发

            1.componentWillUnmount()

                一般在这个钩子做一些收尾的事，例如：关闭定时器、取消订阅消息、

        

 新声明周期

1、初始化阶段:由ReactDOM.render()触发---初次渲染

                1.constructor()

                2.getDerivedStateFromProps

                3.render()

                4.componentDidMount()===>常用

                一般在这个钩子做一些初始化的事情，例如开启定时器、发送网络请求、订阅消息

            2．更新阶段:由组件内部this.setSate()或父组件重新render触发

                1.getDerivedstateFromProps()

                2.shouldcomponentUpdate()

                3.render()

                4.getSnapshotBeforeUpdate()

                5.componentDidUpdate()

            3.卸载组件:由ReactDOM. unmountComponentAtNode()触发

                1.componentwi1lUnmount()