我只是想知道人们是否知道使用“渲染道具”模式是否导致过度安装/卸载子组件。 例如,从反应文档(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>
)
}
}
我知道反应文档说:
如果在render方法中创建函数,使用render prop可以否定使用React.PureComponent所带来的好处。这是因为浅支柱比较对于新道具总是返回false,并且在这种情况下每个渲染都将为渲染道具生成新值。
但是,“会安装!”当用户移动鼠标时,一遍又一遍地调用?
谢谢!
答案 0 :(得分:3)
我继续前进并试图用小提琴回答我自己的问题。似乎&#34;安装!&#34;不是一遍又一遍地调用:
https://jsfiddle.net/69z2wepo/186690/
以下是代码:
select
trans.TIMESTAMP, trans.user,
trans.amt * coalesce(er.rate, 1) as "Converted Amount"
from transactions trans
left join exchange_rates er on er.curr1 = trans.curr
答案 1 :(得分:0)
componentDidMount仅调用一次,但每次更改状态/道具时,componentDidUpdate将与渲染函数一起多次调用。