React学习手册

组件扩展

｜

155

根据属性设置

State

上述代码示例已经省去了

componentWillReceiveProps

用法的演示。如果这是我

们使用

HiddenMessage

的初衷，那么应该使用一个无状态函数式组件取而代之。

目前我们还将

State

添加到子组件的唯一原因是，希望该组件自身可以修改相关

的

State

。

例如，如果组件需要一个

setState

调用，则使用

componentWillReceiveProps

来

修改

State

是有必要的：

hide() {

const hidden = true

this.setState({hidden})

}

show() {

const hidden = false

this.setState({hidden})

}

return

<p

onMouseEnter={this.show}

onMouseLeave={this.hide}>

{(hidden) ?

children.replace(/[a-zA-Z0-9]/g, "x") :

children

}

</p>

在这种情况下，最好将相应的

State

存放在

HiddenMessage

组件中。如果该组件不

能修改自身的某些属性，那么最好让它保持无状态并只通过父组件管理

State

。

组件生命周期方法给用户提供了更精细的控制能力，来决定如何渲染或者更新某个组

件。它为用户提供的钩子允许我们在挂载和更新发生之前或者之后都可以添加相应的

功能。接下来，我们将会介绍如何使用这些生命周期方法集成第三方 ...