javascript - 初始化 react 组件状态

标签 javascript reactjs

我遇到了一些在类中定义组件状态的 React 代码,如下所示:

// Snippet 1
class Sample extends React.Component {
    state = {
        count: 0
    }
}

我学习 React 的方式是在类的构造函数中声明状态:

// Snippet 2
class Sample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
}

我能想到的唯一区别是在构造函数中初始化状态将保证在组件生命周期中正确初始化状态。

以上两个代码片段有什么区别?在片段 1 中,假设在初始化类时正确设置了状态是否安全?

最佳答案

您正在查看的是 ES7+ Property Initializers。这样做是因为 Facebook 知道 Javascript 将来会发生变化。他们希望能够应对这些变化。

According to facebook ES7+ Property Initializers

Wait, assigning to properties seems like a very imperative way of defining classes! You're right, however, we designed it this way because it's idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript....

这是 Facebook link 还有更多信息 here

也是一个Link to the proposal

关于javascript - 初始化 react 组件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41133240/

相关文章:

javascript - 获取数组最后一个元素时出错

javascript - 浏览器大小更改后出现 Google map

reactjs - fontFamily "$text-font-family"不是系统字体,没有通过 Font.loadAsync 加载

javascript - 如何覆盖 react-router-dom Link 组件反向链接?

reactjs - 以编程方式响应 native (使用 Redux)动画切换

javascript - 当我想查看更改时,如何在不重新启动 nodejs 的情况下编辑我的服务器文件?

javascript - 如何在 Javascript 中将字符串附加到对象 'path'?

javascript - 使用 wkhtmltopdf 将 Google 图表输出为 PDF

javascript - 仅显示路线上的一个组件并隐藏所有其他组件

javascript - 填充数组项上的映射函数后似乎为空