Render Props
基本用法
有这样一种组件，它只维护自身的state（可能也包括修改state值的ui与handler），具体的显示逻辑由子组件完成。例如：
class Container extends React.Component {
state = { value: 1 }
render() {
return <div>
<button onClick={() => this.setState({ value: this.state.value + 1 })}>
add
</button>
{/* 接收value并展示具体ui的子组件, 例如要渲染ValueUI */}
<ValueUI value={this.state.value} />
</div>
}
}
class ValueUI extends React.Component {
render() {
return <p>{ this.props.value }</p>
}
}
假如我们要渲染的ui组件是可替换的，那么就不能再Container里把它写死。解决方法就是Render Props写法：可以向Container传入一个prop，它是一个输出组件的function。例如：
class Container extends React.Component {
state = { value: 1 }
render() {
return <div>
<button onClick={() => this.setState({ value: this.state.value + 1 })}>
add
</button>
{ this.props.render(value) }
</div>
}
}
function Main() {
return <Container
render={value => <ValueUI value={value} />}
/>
}
这样在使用Container时，就可以自由地切换render函数中要渲染的组件了。
Render Props写法并不是非要用render作prop名，可以是任意的名称，还可以利用children属性，这样代码就可以写成：
class Container extends React.Component {
state = { value: 1 }
render() {
return <div>
<button onClick={() => this.setState({ value: this.state.value + 1 })}>
add
</button>
{ this.props.children(value) }
</div>
}
}
function Main() {
return <Container>{
value => <ValueUI value={value} />
}</Container>
}
重渲染问题
Render Props与PureComponent搭配使用时有一个问题需要注意。我们把上面的Container组件改为PureComponent，并修改一下Main的代码：
class Container extends React.PureComponent {...}
class Main extends React.Component {
render() {
return <div>
<button onClick={() => this.setState({})}>click</button>
<Container>{
value => <ValueUI value={value} />
}</Container>
</div>
}
}
点击Main里的button时，我们预期的是Container不会重渲染，但是事与愿违。这是因为Main的render函数每次执行时，都会新生成一个value => <ValueUI value={value} />函数，即Container的children属性，也就是说每次Main重渲染，Container的prop都会改变。解决方法是把这个函数独立出来，比如：
class Main extends React.Component {
renderValueUI(value) {
return <ValueUI value={value} />
}
render() {
return <div>
...
<Container>{ this.renderValueUI }</Container>
</div>
}
}
React 16的新型Context API
Context与Render Props
Render Props写法也常用于React的新Context API，尤其是嵌套访问Context时：
const ColorContext = React.createContext('red')
const SizeContext = React.createContext('large')
class Main extends React.Component {
render() {
return <ColorContext.Provider value='red'>
<SizeContext.Provider value='large'>
<Wrapper />
</SizeContext.Provider>
</ColorContext.Provider>
}
}
class Wrapper extends React.Component {
render() {
return <UIComp />
}
}
class UIComp extends React.Component {
render() {
return <ColorContext.Consumet>{
color => (
<SizeContext.Consumer>{
size => <Child color={color} size={size} />
}</SizeContext.Consumer>
)
}</ColorContext.Consumet>
}
}
如果没有嵌套的话，用contextType的写法更简单：
const ColorContext = React.createContext('red')
class Main extends React.Component {
render() {
return <ColorContext.Provider value='red'>
<Wrapper />
</ColorContext.Provider>
}
}
class Wrapper extends React.Component {
render() {
return <UIComp />
}
}
class UIComp extends React.Component {
static contextType = ColorContext
render() {
return <Child color={this.context} />
}
}
Provider的穿透性
Provider本身是一个组件，当它所处层级发生重渲染时，它与普通组件一样会触发自身与children的重渲染；另一方面，只要Provider的value发生改变(使用Object.is来判断)，它的子树上的所有Consumer也都会发生重渲染，不论Provider与Consumer层级之间是否有组件block了更新(shouldComponentUpdate返回false)。这就是新Context API的穿透性，当Provider的value改变时，它无视子树上的shouldComponentUpdate，穿透层级更新Consumer。这个穿透性，老Context是不具备的。
下面是一个验证穿透性与普通组件属性的例子：
const defaultValue = { count: 1 }
const Context = React.createContext({ ...defaultValue })
class Main extends React.Component {
state = { ...defaultValue }
render() {
return <div>
<div><button onClick={() => {
// # test code #
}}>+</button></div>
<Context.Provider value={this.state.count}>
<div className="app">
<Wrapper count={this.state.count} />
<OtherComp />
</div>
</Context.Provider>
</div>
}
}
class OtherComp extends React.Component {
render() {
console.log('render otherComp')
return <p>OtherComp</p>
}
}
class Wrapper extends React.Component {
shouldComponentUpdate() { return false }
render() {
console.log('render wrapper')
return <div>
<p>wrapper: {this.props.count}</p>
<Child />
</div>
}
}
class Child extends React.Component {
static contextType = Context
render() {
console.log('render child')
return <p>child: {this.context.count}</p>
}
}
# test1: count变化 #
this.setState({ count: this.state.count + 1 })
// click button then logs:
// render child
// render otherComp
// Main重渲染，Provider发现value变化，无视Wrapper的block，触发Consumer(Child)重渲染
# test2: count值不变的情况下重渲染Main #
this.setState(this.state)
// click button then logs:
// render otherComp
// Provider发现value无变化，不触发Consumer重渲染；且Wrapper阻止了重渲染，所以Child没有重渲染
Context导致的重复渲染问题:
上面这个例子中，Main组件的state作为Provider的value传给Consumer，state变更在Main组件的层级发生，这样会导致一个问题：每次setState，Main的render函数执行，OtherComp这个不相关的组件也重渲染了，而我们的本意只是要更新Consumer。换句话说，Main执行render -> render中的JSX重新解析(React.CreateElement) -> OtherComp执行render。那么有什么方法可以避免呢？
思路很简单，Main的render执行肯定会引发OtherComp的render执行，那么我们可以不让Main来做管理Context的value这件事：建一个独立的组件来管理value和Provider，把children的JSX写在这个组件之外。
class CountProvider extends React.Component {
state = { ...defaultValue }
render() {
return <div>
<div><button onClick={() => { ... }}>+</button></div>
<Context.Provider value={this.state.count}>
{ this.props.children }
</Context.Provider>
</div>
}
}
class Main extends React.Component {
render() {
return <CountProvider>
<div className="app">
<Wrapper />
<OtherComp />
</div>
</CountProvider>
}
}
这样以来，CountProvider每次更新state，执行render时，收到的children都是Main传给他的，而Main的render没有执行，因此OtherComp的render也不会执行；Context发现value变化，触发子组件树中的Consumer-Child重渲染。
References
React - Render Props官方文档
React - Context官方文档
避免React Context导致的重复渲染
