Component或PureComponent

Component或PureComponentPureComponent，原名PureRenderMixin，与Component基本相同，只是会在渲染前自动对组件进行浅比较（shallowcomparison），以决定是否更新组件。浅比较类似于浅拷贝，只是会比较第一层的Component，只要setState()和props改变就会触发渲染，如果我们不想让页面重新渲染，就要这样写shouldComponentUpdate拦截rendershouldComponentUpdate(nextProps,nextState){returnnextProps.xxx.xx===props.xxx.x??x;}PureComponentPureComponent为您处理shouldComponentUpdate事件。当props或state发生变化时，PureComponent将对两者进行浅层比较；而Component不会比较两者的新旧值。if(this._compositeType===CompositeTypes.PureClass){shouldUpdate=!shallowEqual(prevProps,nextProps)||!shallowEqual(inst.state,nextState);}浅比较浅比较只会检查原始数据类型的值是否相等（例如：1等于1或true等于true），复杂的如对象和数组只比较引用值而且只比较第一层，不会递归比较，所以渲染会比较复杂注意变量数据不能使用引用你会发现无论你怎么点击删除按钮，数li不会减少，因为items使用了引用，而shallowEqual的结果为真。这里的items其实就是指向状态下的item来操作。本质上，引用没有改变，不会触发renderclassAppextendsPureComponent{state={items:[1,2,3]}handleClick=()=>{const{items}=this.state;项目.pop();this.setState({items});}render(){return(

)}}要触发渲染，必须更改引用handleClick=()=>{const{items}=this.state;项目.pop();this.setState({items:[].concat(items)});}父组件将函数传递给子组件父组件内部有一个子组件列表，每个子组件传递一个唯一的参数给父组件方法。为了绑定这个参数，你可能会这样做：=>this.likeComment(user.id)将执行并返回一个新函数（带有新引用），该函数将被创建并传递给likeComment属性。这样，当对子组件的props进行浅对比时，会发现props引用发生了变化，导致render。所以我们要这样写来减少render在render方法中获取数据下面的代码要特别注意。每次父组件中rendertopTen的引用都会被重新生成（改变），导致子组件使用这个变量。renderrender(){const{posts}=this.propsconsttopTen=posts.排序（（a，b）=>b。喜欢-a。喜欢）。slice(0,9)返回//...}