今天开始学习React，todo-list的实现、项目初始化、react-redux的使用

class Todo extends React.Component {
    constructor(props) {
      super(props)
      this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this)
      this.state = {
        list: []
      }
    }
    handleKeyUp(e) {
      if (e.keyCode === 13) {
        this.setState({
          list: [...this.state.list, e.target.value]
        })
        e.target.value = ''
      }
    }
    handleClick(index, e) {
      this.setState({
        list: [...this.state.list.slice(0, index), ...this.state.list.slice(index + 1)]
      })
    }
  render() {
    return (<div>
      <div className='todo-warpper'>
        <input className='todo-input' onKeyUp={this.handleKeyUp.bind(this)}/>
      </div>
      <ul className='todo-list'>
        {(this.state.list || []).map((item, index) =>
          <li onClick={this.handleClick.bind(this, index)} key={index}>{item}</li>)
        }
      </ul>
    </div>)
  }
}
ReactDOM.render(
  <Todo/>,
  document.getElementById('root'));

（1）react项目的初始化：

npm install -g create-react-app

create-react-app 项目名称

npm install react-redux redux

（2）项目结构：

actions--->用户行为
components--->组件
containers--->容器
reducer---> store里面负责分发action行为
index.html ---> 模板文件
server.js---> 构建项目相关配置文件
webpack---> 打包配置文件

（3）react-redux

智能组件和木偶组件：

（4）父子组件之间通信

1. 父组件可以向子组件传递props，props中带有初始化子组件的数据。
2. 子组件向父组件通讯，同样也需要父组件向子组件传递 props 进行通讯，只是父组件传递的，是作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中。