13【react高级指引（下）】

1.组件优化

1.1 shouldComponentUpdate 优化

在我们之前一直写的代码中，我们一直使用的Component 是有问题存在的

1. 只要执行 setState ，即使不改变状态数据，组件也会调用 render
2. 当前组件状态更新，也会引起子组件 render

而我们想要的是只有组件的 state 或者 props 数据发生改变的时候，再调用 render

我们可以采用重写 shouldComponentUpdate 的方法，但是这个方法不能根治这个问题，当状态很多时，我们没有办法增加判断

看个案例来了解下原理：

如果你的组件只有当 props.color 或者 state.count 的值改变才需要更新时，你可以使用 shouldComponentUpdate 来进行检查：

class CounterButton extends React.Component {constructor(props) {super(props);this.state = {count: 1};}shouldComponentUpdate(nextProps, nextState) {if (this.props.color !== nextProps.color) {return true;}if (this.state.count !== nextState.count) {return true;}return false;}render() {return ( this.setState(state => ({count: state.count + 1}))}>Count: {this.state.count});}
}

在这段代码中，shouldComponentUpdate 仅检查了 props.color 或 state.count 是否改变。如果这些值没有改变，那么这个组件不会更新。如果你的组件更复杂一些，你可以使用类似“浅比较”的模式来检查 props 和 state 中所有的字段，以此来决定是否组件需要更新。React 已经提供了一位好帮手来帮你实现这种常见的模式 - 你只要继承 React.PureComponent 就行了。

1.2 PureComponent 优化

这段代码可以改成以下这种更简洁的形式：

class CounterButton extends React.PureComponent {constructor(props) {super(props);this.state = {count: 1};}render() {return ( this.setState(state => ({count: state.count + 1}))}>Count: {this.state.count});}

大部分情况下，你可以使用 React.PureComponent 来代替手写 shouldComponentUpdate。但它只进行浅比较，所以当 props 或者 state 某种程度是可变的话，浅比较会有遗漏，那你就不能使用它了。当数据结构很复杂时，情况会变得麻烦。

PureComponent 会对比当前对象和下一个状态的 prop 和 state ，而这个比较属于浅比较，比较基本数据类型是否相同，而对于引用数据类型，比较的是它的引用地址是否相同，这个比较与内容无关

state = {stus:['小张','小李','小王']}addStu = ()=>{/* const {stus} = this.statestus.unshift('小刘')this.setState({stus}) */const {stus} = this.statethis.setState({stus:['小刘',...stus]})
}

注释掉的那部分，我们是用unshift方法为stus数组添加了一项，它本身的地址是不变的，这样的话会被当做没有产生变化(因为引用数据类型比较的是地址)，所以我们平时都是采用合并数组的方式去更新数组。

1.3 案例

import React, { PureComponent } from 'react'
import "./index.css";export default class A extends PureComponent {state = {username:"张三"}handleClick = () => {this.setState({})}render() {console.log("A:enter render()")const {username} = this.state;const {handleClick} = this;return (
我是组件A
我的username是{username}  执行setState且不改变状态数据
)}
}class B extends PureComponent{render(){console.log("B:enter render()")return (
我是组件B
)}
}

handleClick = () => {this.setState({username: '李四',})
}

handleClick = () => {const { state } = thisstate.username = '李四'this.setState(state)
}

Vue中: 使用slot技术, 也就是通过组件标签体传入结构  
React中:使用children props: 通过组件标签体传入结构使用render props: 通过组件标签属性传入结构, 一般用render函数属性

render() {return (xxxx)
}问题: 如果B组件需要A组件内的数据, ==> 做不到 

hello

 } />
A组件: {this.props.render(内部state数据)}
B组件: 读取A组件传入的数据显示 {this.props.data} 

export default class Parent extends Component {render() {return (
我是Parent组件 () }/>
)}
}class A extends Component {state = {name:'tom'}render() {console.log(this.props);const {name} = this.statereturn (
我是A组件
{this.props.render(name)}
)}
}class B extends Component {render() {console.log('B--render');return (
我是B组件,{this.props.name}
)}
}

const Backdrop = () => {return