react ES6 组件，构造变量与状态变量

IT技术 reactjs
2021-05-13 15:24:03

在构造中定义变量并在模板中使用它们与在 getInitialState() 函数内部定义有什么区别？

在 ES6 中，我可以忘记使用 getInitialState() 并在构造上移动所有内容吗？

例子：

class TodoApp extends Component {  

  constructor() {
    super();
    this.test1 = 'hello this is a test';
    this.state = { // thanks to @Piotr Berebecki, 
                  // i know to define states variable
      test2:'this is state test'
    }
  }
  changeTest () {
    this.state.test2 = 'my new state test';

  }
  render() {


    return (
      <div>
        <button onClick={this.changeTest}>change</button>
        Test:{this.test1}
        <br/>State Test:{this.test2}
      </div>
     );
  }
}


ReactDOM.render(
  <TodoApp />,
  document.getElementById('app')
);
1个回答

对于 ES6 类语法，我们不使用getInitialState. 相反，我们使用：this.state = {}在构造函数方法中。看看这里的演示：http : //codepen.io/PiotrBerebecki/pen/yagVgA

还有官方的 React 文档（https://facebook.github.io/react/docs/reusable-components.html#es6-classes）：

你也可以将你的 React 类定义为一个普通的 JavaScript 类。例如使用 ES6 类语法。除了 getInitialState 之外，API 类似于 React.createClass。不是提供单独的 getInitialState 方法，而是在构造函数中设置自己的状态属性。就像 getInitialState 的返回值一样，您分配给 this.state 的值将用作组件的初始状态。

下面的两个片段显示了语法上的差异。

class TodoApp extends React.Component {
  constructor() {
    super();
    this.state = {
      test2: 1
    };
    this.test3 = 'this is test3';
  }

  changeState() {
    this.setState({
      test2: this.state.test2 + 1
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.changeState.bind(this)}>test2: {this.state.test2}</button>
        <p>test3: {this.test3}</p>
      </div>
    );
  }
}

以上等价于：

var TodoApp = React.createClass({
  getInitialState: function() {
    return {
      test2: 1
    };
  },

  test3: 'this is test3',

  changeState: function() {
    this.setState({
      test2: this.state.test2 + 1
    });    
  },

  render: function() {
    return (
      <div>
        <button onClick={this.changeState}>test2: {this.state.test2}</button>
        <p>test3: {this.test3}</p>
      </div>
    );
  }
});
其它你可能感兴趣的问题
上一篇如何在 React 中使用配置文件？ 下一篇如何在 react-chartjs-2 中更新图表？