React源码阅读-3React.ComponentclassWelcomeextendsReact.Component{render(){return

Hello,{this.props.name}

;}}在React组件中，代码重用的主要手段是组合而不是继承。必须在React.Component的子类中定义一个render()函数。本节中描述的其他方法是可选的。React.PureComponentReact.PureComponent与React.Component非常相似。两者的区别在于React.Component没有实现shouldComponentUpdate()，而React.PureComponent通过浅比较prop和state来实现这个功能。在某些情况下，使用React.PureComponent可以提高性能，因为如果为React组件提供相同的道具和状态，render()函数将呈现相同的内容。React.PureComponent中的shouldComponentUpdate()仅对对象进行浅层比较。如果对象包含复杂的数据结构，则可能会产生错误的比较结果，因为无法检查深层差异。如果你的props和状态很简单，只使用React.PureComponent，或者当深层数据结构发生变化时调用forceUpdate()以确保组件得到正确更新。您还可以考虑使用不可变对象来加速嵌套数据的比较。此外，React.PureComponent中的shouldComponentUpdate()将跳过所有子组件树的属性更新。因此，请确保所有子组件也是“纯”组件。原理当组件更新时，如果组件的props和state没有发生变化，则不会触发render方法，省去了VirtualDOM的生成和比较过程，达到了提升性能的目的。具体来说，React会自动为我们做一个浅比较：!shallowEqual(inst.state,nextState);}和shallowEqual你又做了什么？会比较Object.keys(state|props)的长度是否一致，每个key是否都有，是否是引用，也就是只比较第一层的值，真是浅薄，so深度嵌套数据无法比较。functionshallowEqual(objA:mixed,objB:mixed):boolean{if(is(objA,objB)){returntrue;}if(typeofobjA!=='object'||objA===null||typeofobjB!=='object'||objB===null){returnfalse;}constkeysA=Object.keys(objA);constkeysB=Object.keys(objB);如果(keysA.length!==keysB.length){返回false;}//测试A的键是否不同于B.for(leti=0;i{const{items}=this.state;项目.pop();this.setState({items});}render(){return(

{this.state.items.map(i=>{i})}

delete

)}}你会发现无论怎么点击delete按钮，li都不会变少，因为items使用了引用，shallowEqual的结果是true.更正：handleClick=()=>{const{items}=this.state;项目.pop();this.setState({items:[].concat(items)});如果数据是基本类型，则可以更新。如果是引用类型，则不会更新。handleClick=()=>{const{items}=this.state;items.splice(items.length-1,1);这。setState({items});}子组件仍然重新渲染。这要求我们确保不能更改对不变子组件数据的引用。这时候就可以使用immutable-js函数库了。函数属性//1this.props.update(e.target.value)}/>//2update(e){this.props.update(e.target.value)}render(){return}由于MyInput组件的onChange属性在每次render操作时都会返回一个新的函数，所以父组件的render也会导致MyInput组件的render，即使没有变化，所以要尽量避免这样写，最好这样写：//1,2update=(e)=>{this.props.update(e.target.value)}render(){return}空对象，空数组或固定对象有时在后台返回的数据中，如果长度数组为0或者对象没有属性，直接给null。这时候，我们需要做一些容错：classAppextendsPureComponent{state={items:[{name:'test1'},null,{name:'test3'}]}store=(id,value)=>{const{items}=这个。状态;items[id]=assign({},items[id],{name:value});this.setState({items:[].concat(items)});}render(){return(

{this.state.items.map((i,k)=>)}

)}}PureComponent确实只在一些纯显示组件上起作用，如果使用复杂的组件也没关系，反正shallowEquallevel不会通过，但是记住即props和state不能使用同一个引用，组件的生命周期生命周期地址