1.聪明组件和傻瓜组件---react应用中最简单常见的组件模式
也叫有状态和无状态组件，本质是1个功能分配到2个组件中，形成父子关系，外层的父组件负责管理数据状态，内层子组件只负责展示
“责任分离”就是让一个模块责任尽量少，一个模块专注于一个功能，这样更有利于代码维护，react其实就是这样的公式：
UI = f（data）
react做界面无外乎就是获得驱动界面的数据，然后利用数据来渲染界面。一个组件尽管可以搞定，但是，把获取和管理数据这件事和界面渲染分开。做法就是获取和管理数据的逻辑放父组件-----聪明组件，渲染界面逻辑放子组件-----傻瓜组件
此做法可灵活修改数据状态管理方式，比如Redux换为Mobx,这种模式分割的组件只需修改聪明组件，傻瓜保持原样
傻瓜逻辑超简单，界面完全有props决定，因为不想每次都重新渲染，所以会重新与以前的比较有无改变， PureComponent和shouldComponentUpdate对props只是做的浅层比较，如果props为深层对象，易出问题。比如，2次渲染传入的都是同一个props对象，但对象里某个属性的值不同，PureComponent眼里没有变化，不重新渲染，，而且他的渲染必须实现为class
React v16.6.0之后的，有了新功能React.memo（第二个参数无法针对states），既利用了shouldComponentUpdate，又不要求写一个class，这在逐渐向完全函数式编程前进
外部传的值变化，必定引起这个组件的重新渲染，就算组件没使用这个值
2.高阶组件---实为一个特殊的函数，接受至少一个React组件为参数，并且能够返回一个全新的React组件作为结果，这个新产生的React组件是对作为参数的组件的包装，赋予新组件一些增强的“能力”
React里组件为第一公民，当某些功能多个组件通用，“不要重复自己”原则就想把共用逻辑提取为一个React组件。但是，有些情况下，这些共用逻辑没法成为独立组件，也就是他们单独无法使用，只是对其他组件的功能加强
高阶组件形式
函数 withDoNothing 是个高阶组件，命名一般带with前缀，高阶组件的基本套路如下：
1.高阶组件不能修改作为参数的组件，高阶组件必须是一个纯函数，不应该有任何副作用
2.高阶组件返回结果必须是一个新的React组件，这个新的组件jsx部分肯定会包含作为参数的组件
3.高阶组件一般需要把传给自己的props转手传递给作为参数的组件
高阶组件的高级用法-----只需返回一个react组件，但传入的可以多个，不局限于1个
链式调用是高阶组件的巧妙之处----避免中间变量挨个包装，直接连续调用高阶组件
高阶组件本身是1个纯函数，纯函数是可以组合使用的，所以，可以把多个高阶组件组合为一个高阶组件
网友评论