我最近一直在用 React.js 编写组件。我从来没有使用过像这样的方法componentWillMount
and componentDidMount
.
render
是不可或缺的。getInitialState
我编写的其他辅助方法也派上用场。但不是前面提到的两种生命周期方法。
我目前的猜测是它们是用于调试的?我可以在其中console.log出:
componentWillMount: function() {
console.log('component currently mounting');
},
componentDidMount: function() {
console.log('component has mounted');
}
还有其他用途吗?
componentDidMount
如果你想使用一些非 React JavaScript 插件,这很有用。例如,React 中缺乏一个好的日期选择器。Pickaday https://github.com/dbushell/Pikaday很漂亮,而且开箱即用。因此,我的 DateRangeInput 组件现在使用 Pickaday 作为开始和结束日期输入,我将其连接如下:
componentDidMount: function() {
new Pikaday({
field: React.findDOMNode(this.refs.start),
format: 'MM/DD/YYYY',
onSelect: this.onChangeStart
});
new Pikaday({
field: React.findDOMNode(this.refs.end),
format: 'MM/DD/YYYY',
onSelect: this.onChangeEnd
});
},
需要渲染 DOM,以便 Pikaday 能够连接到它,并且componentDidMount
钩子可以让你钩住那个确切的事件。
componentWillMount
当您想在组件安装之前以编程方式执行某些操作时非常有用。我正在开发的一个代码库中的一个例子是一个 mixin,它有一堆代码,否则这些代码将在许多不同的菜单组件中重复。componentWillMount
用于设置一个特定共享属性的状态。其他方式componentWillMount
可以使用的是通过 prop(s) 设置组件分支的行为:
componentWillMount() {
let mode;
if (this.props.age > 70) {
mode = 'old';
} else if (this.props.age < 18) {
mode = 'young';
} else {
mode = 'middle';
}
this.setState({ mode });
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)