PureComponent

PureComponent 在其内部实现了 shouldComponentUpdate() 方法的浅比较逻辑。当组件的 props 或 state 发生变化时，React 会通过这个方法检查前后的 props 和 state 是否相等。

如果 shouldComponentUpdate() 返回 false，则 React 不会触发组件的重新渲染过程，这可以避免不必要的渲染和可能带来的性能开销。

1. 使用 React.Component，不会进行浅比较

当执行this.setState({})时：

• <Parent />组件 中 state 没有发生变化，也会重新执行render()
• <Child />组件 没有接收任何props，也会重新执行render()
  .

不管父子组件的 props 或 state 有没有发生变化，都会重新执行各自的render()，重新渲染组件。这显然不符合逻辑，效率低下

import React, { Component } from 'react'export default class Parent extends Component {state = { name: '张三' }changeName = () => {this.setState({})}render () {console.log('Parent render');return (<div><button onClick={this.changeName}>点击</button><Child /></div>)}
}class Child extends Component {render () {console.log('Child render');return (<div>Child</div>)}
}

.

2. 使用 shouldComponentUpdate 生命周期钩子，手动比较

使用 shouldComponentUpdate 生命周期钩子，手动判断 props 或 state 的发生变化：

• 如果父组件数据没有更新，则父组件和子组件都不需要重新render()：父组件 => shouldComponentUpdate () { return false }
• 如果父组件数据有更新，则父组件需要重新render()：父组件 => shouldComponentUpdate () { return true }
• 子组件则判断props数据有没有更新：子组件 => shouldComponentUpdate (nextProps, nextState) { return !this.props.name === nextProps.name }

import React, { Component, PureComponent } from 'react'export default class Parent extends Component {state = { name: '张三' }changeName = () => {this.setState({})}shouldComponentUpdate (nextProps, nextState) {// 当执行 this.setState({})时，state中数据没有变化时， return false 阻止更新.这样就不会重新渲染Parent组件，Child组件也不会更新// 当执行 this.setState({ name: '李四' })时，state中数据发生改变， return true 这会重新渲染Parent组件，这是Child组件的props会改变if (this.state.name === nextState.name) {return false} else {return true}}render () {console.log('Parent render');return (<div><button onClick={this.changeName}>点击</button><Child name={this.state.name} /></div>)}
}class Child extends Component {// 如果接收到的props中数据没有变化，则return false，阻止组件更新shouldComponentUpdate (nextProps, nextState) {if (this.props.name === nextProps.name) {return false} else {return true}}render () {console.log('Child render');return (<div>Child{this.props.name}</div>)}
}

3. 使用 React.PureComponent，自动进行浅比较

PureComponent 在其内部实现了 shouldComponentUpdate() 方法的浅比较逻辑。当组件的 props 或 state 发生变化时，React 会通过这个方法检查前后的 props 和 state 是否相等。

import React, { PureComponent } from 'react'export default class Parent extends PureComponent {state = { name: '张三' }changeName = () => {this.setState({})}// 相当于PureComponent中内置shouldComponentUpdate的判断逻辑// shouldComponentUpdate (nextProps, nextState) {//     return !this.state.name === nextState.name// }render () {console.log('Parent render');return (<div><button onClick={this.changeName}>点击</button><Child name={this.state.name} /></div>)}
}class Child extends PureComponent {// 相当于PureComponent中内置shouldComponentUpdate的判断逻辑// shouldComponentUpdate (nextProps, nextState) {//     return !this.props.name === nextProps.name// }render () {console.log('Child render');return (<div>Child{this.props.name}</div>)}
}

---

---

Render Props

在React中，并没有直接对应于 Vue.js 中的 “插槽”（slot）的概念。Vue.js的插槽允许你在子组件的模板中预留一些占位符，这些占位符可以由父组件来填充内容。

然而，React通过其组合和props传递的特性，提供了类似的功能，但实现方式略有不同。

1. 使用 Children props（通过组件标签体传入结构）

在子组件中可以通过 this.props.children 接收并渲染父组件传递的任何内容

import React, { Component } from 'react'export default class Parent extends Component {state = { name: '张三' }render () {return (<Child><p>这是一段文本。</p><button>这是一个按钮。</button></Child>)}
}class Child extends Component {render () {return (<div className='childNode'>{/* 获取到<Child>中的标签属性 */}{this.props.children} // 这里可以接收并渲染父组件传递的任何内容</div>)}
}

把 <Child> 内部的两个节点插入到 .childNode 中

多层嵌套

• 通过 <Child> <Grand/> </Child> 的形式，形成父子组件

• 通过{this.props.children}的形式，渲染内容

import React, { Component } from 'react'// 父组件  
export default class Parent extends Component {state = { name: '张三' }render () {return (<Child>{/* Grand是Child的子组件 */}<Grand name={this.state.name} /></Child>)}
}// 子组件  
class Child extends Component {state = { name: '李四' }render () {return (<div className='childNode'><p>Child组件</p>{this.props.children}</div>)}
}// 孙子组件  
class Grand extends Component {render () {return (<div className='grandNode'><p>Grand组件</p><p>{this.props.name}</p></div>)}
}

但这样 Child 组件里的数据(state = { name: '李四' })无法传递给 Grand 组件，因此需要使用 Render Props

.

2. 使用 Render Props（通过组件标签属性传入结构）

Render props是一种在React组件之间共享代码的模式。一个组件接收一个返回React元素的函数作为prop，并在其渲染方法中调用该函数。这使得父组件能够动态地决定子组件应该渲染什么内容。

• 通过 <Child render={() => <Grand />} /> 的形式，形成父子组件：render prop 的模式来在 Child 组件中动态渲染 Grand 组件

• 通过{this.props.render()}的形式，动态渲染内容

import React, { Component } from 'react'// 父组件  
export default class Parent extends Component {state = { name: '张三' }render () {return (// 通过 render prop 的模式来在 Child 组件中动态渲染 Grand 组件<Child render={(name) => <Grand name={name} />} />)}
}// 子组件  
class Child extends Component {state = { name: '李四' }render () {return (<div className='childNode'><p>Child组件</p>{/* <Grand>组件被放置在这里，并传入Child组件的数据(name: '李四') */}{/* 相当与vue中<slot>插槽，动态渲染的位置 */}{this.props.render(this.state.name)}  </div>)}
}// 孙子组件  
class Grand extends Component {render () {return (<div className='grandNode'><p>Grand组件</p><p>{this.props.name}</p></div>)}
}

这样 Child 组件里的数据(state = { name: '李四' })就可以传递给 Grand 组件 了