Question

我刚开始研究ReactJS并有一些问题。我正在阅读文档here，但我无法找到我要找的答案。这是一个例子：

var Awesome = React.createClass({
  getInitialState:function() {
    return {
      txt : ["1","2","3","4","5"],
      isTrue : true
    }
  },

  handleClick:function() {
    this.setState({
      isTrue : !this.state.isTrue
    })
  },

  render:function() {
    var changeStyle = {
      display: this.state.isTrue ? "block" : "none"
    };

    var message = this.state.txt.map(function(oneMessage) {
      return  <SubChild change={changeStyle} txt={oneMessage}/>
    });

    return (
      <div>
        <button onClick={this.handleClick} >Click Me</button>
        {message}
      </div>
      )
  }
})

var SubChild = React.createClass({
  render:function() {
    return (
      <div style={this.props.change}>
        <h3>{this.props.txt}</h3>
      </div>
      )
  }
})

React.render(<Awesome />, document.body)

一切正常，但我有一些问题。如您所见我将状态存储在变量中。这是最佳实践吗？如果没有渲染函数内的变量或实际上没有状态（我试图避免状态），我怎样才能获得相同的结果？ 这可能吗？这是我的Fiddle

Answer 1

为何选择状态变量？

使用状态变量的想法是拥有更改/动态数据，即如果有关组件的任何内容正在发生变化，则应将其定义为组件中的状态变量，以便用户交互可以导致此变量的更改和更改在此变量中，会使受影响的组件重新渲染。

使用属性

如果为组件的每个实例更改了某个值，并且不受用户交互或组件状态更改的影响，则应将其定义为属性，以便在实例化时仅分配一次。

在所有情况下，我们都无法真正避免在渲染中使用变量

这个好的练习存储状态是变量吗？

1 个答案: