React学习---从外部访问组件+生命周期方法

1.从外部访问组件

让React应用与外界进行通信的方法,是在使用ReactDOM.render()方法进行渲染时,把引用赋值给一个变量,然后在外部通过该变量访问组件:

现在就可以通过myTextAreaCounter访问组件的方法和属性,就像是在组件的内部使用this访问一样。

除此之外,还能通过该变量设置新的state值;获取react创建的父元素DOM节点的引用:

通过以下方法访问组件的属性和状态:

但是,这种方法要正确使用,不要按照自己的想法修改不属于自己的组件的state。

2.生命周期方法

使用生命周期方法可以监听组件的改变。常用的如下:

  • componentWillUpdate()   当组件再次渲染时,在render()方法前调用。(在组件的props或者state发生改变时触发)
  • componentDidUpdate()   当render()函数执行完了,并且更新的组件已被同步到DOM后立即调用。该方法不会在初始化渲染时触发。
  • componentWillMount()   在新节点插入DOM结构之前触发。
  • componentDidMount()   在新节点插入DOM结构之后触发。
  • componentWillUnmount()   在组件从DOM中移除时立刻触发。
  • shouldComponentUpdate(newProps,newState)   这个方法在componentWillUpdate()之前触发,给自己一个机会返回false进而取消更新组件,也就是说此时render()方法将不会被调用。

以上只是理论,具体例子在后面操作。

猜你喜欢

转载自blog.csdn.net/taylorzun/article/details/80568531