首页 > 关于Redux React的几个问题?

关于Redux React的几个问题?

class AddTodoForm extends React.Component {
  state = {
    message: ''
  };
  onFormSubmit(e) {
    e.preventDefault();
    store.dispatch(addTodo(this.state.message));
    this.setState({ message: '' });
  }
  onMessageChanged(e) {
    var message = e.value.trim();
    this.setState({ message: message });
  }
  render() {
    return (
      <form onSubmit={this.onFormSubmit.bind(this)}>
        <input type="text" placeholder="Todo..." onChange={this.onMessageChanged.bind(this)} value={this.state.message} />
        <button type="submit" value="Add" />
      </form>
    );
  }
}

class TodoItem extends React.Component {
  onDeleteClick() {
    store.dispatch(deleteTodo(this.props.index));
  }
  onCompletedClick() {
    store.dispatch(completeTodo(this.props.index));
  }
  render() {
    return (
      <li>
        <a href="#" onClick={this.onDeleteClick.bind(this)}>[x]</a>
        <a href="#" onClick={this.onCompletedClick.bind(this)}>{this.props.message}</a>
      </li>
    );
  }
}

class TodoList extends React.Component {
  state = {
    items: []
  };
  componentWillMount() {
    store.subscribe(() => {
      var state = store.state();
      this.setState({
        items: state.todo.items
      });
    });
  }
  render() {
    var items = [];
    this.state.items.forEach((item, index) => {
      items.push(<TodoItem
        index={index}
        message={item.message}
        completed={item.completed}
      />);
    });
    return (
      <ol>{ items }</ol>
    );
  }
}

这是用redux结合react的几个view组件,为什么组建内部声明state的时候是直接定义的变量,而不是采用getInitialState方法呢? 如果效果相同的话,二者有什么区别呢?


一个是es5写法 getInitialState

一个是es6写法 state

他们都是将state挂载在this上的,不管是es5还是es6写法,你获取和设置state的方法都是

this.state.xxx

this.setState({ ... })
【热门文章】
【热门文章】