反应渲染道具会导致儿童组件的重新安装吗?

时间:2018-06-06 21:28:36

标签: reactjs

我只是想知道人们是否知道使用“渲染道具”模式是否导致过度安装/卸载子组件。 例如,从反应文档(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,并且在这种情况下每个渲染都将为渲染道具生成新值。

但是,“会安装!”当用户移动鼠标时,一遍又一遍地调用?

谢谢!

2 个答案:

答案 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将与渲染函数一起多次调用。