javascript - 关于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({ ... })

这篇关于javascript - 关于Redux React的几个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！