React中初始化state有两种方式:
在React的组件中初始化state
有两种方式,一是使用ES6 class语法,二是使用实验性的public class fields语法。
ES6 class 语法
当你使用ES6 class语法定义一个组件的时候,通常的做法是在构造函数constructor()
中为 this.state
赋值来初始化state
。
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 为了在回调中使用 `this`,这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
React官方文档指出,使用这种方式需要注意以下几点:
- 如果要初始化
state
或进行方法绑定,就必须要为 React 组件实现构造函数。 - 在为
React.Component
子类实现构造函数时,应在其他语句之前调用super(props)
。否则,this.props
在构造函数中可能会出现未定义的 bug。 - 你必须谨慎对待 JSX 回调函数中的
this
,在 JavaScript 中,class 的方法默认不会绑定this
。如果你忘记绑定this.handleClick
并把它传入了onClick
,当你调用这个函数的时候this
的值为 undefined。
如果觉得使用这种方式很麻烦,这里有一种方式可以解决,就是使用实验性的 public class fields 语法。
public class fields语法
public class fields语法示例代码如下:
class Test extends React.Component {
state = {
isToggleOn:true
};
handleClick = () => {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
这种方式与ES6 class语法方式相比,代码更加简洁,Create React App是 默认启用此语法的。要注意的是:
- 这种方式没有实现构造函数
constructor()
; state
是class的实例属性,并不是静态属性,不需要添加static关键字(就像为static propTypes {…}),其作用域是在Class内部,并不是某一个方法的内部;- 使用的时候还是要用
this.state
;
两种方式的比较
两种方式哪一种更好呢?其实是习惯使用哪种,就使用哪种。
为了比较两种语法在编译的时候有什么区别,这里使用babel的Try it out 来做一下验证。为了输出的代码更具可读性,选择es2016。
ES6 class语法:
public class fields语法:
对比babel编译后的代码可以看出,public class fields语法,其实state也是定义在了constructor中。