我想知道使用“渲染属性”模式是否会导致子组件过多的挂载和卸载。例如,从React文档(https://reactjs.org/docs/render-props.html)中适配:
<Mouse>
{mouse => (
<ShowMousePosition mouse={mouse}/>
)}
</Mouse>
class ShowMousePosition extends React.Component {
componentDidMount(){
console.log('mounting!')
}
render () {
const {mouse} = this.props
return (
<p>The mouse position is {mouse.x}, {mouse.y}</p>
)
}
}
我知道React文档中说:
如果你在render方法内创建函数,使用render prop可能会抵消使用React.PureComponent带来的优势。这是因为浅层比较将始终对新属性返回false,在这种情况下每次渲染都会为render prop生成一个新值。
但是,当用户移动鼠标时,“mounting!”会一遍又一遍地调用吗?
谢谢!