React16.4开发简书项目 从零基础入门到实战-笔记-02

第3章 React基础精讲

本章通过TodoList功能的实现，给大家完整介绍React的基础语法，设计理念以及围绕React展开的一些编程思维。

3-1 使用React编写TodoList功能

将App改成TodoList
完成的效果：http://www.todolist.cn/
render()里的return返回必须为一个大标签即最外层只包含一个元素，可用占位符Fragment替换最外层标签(div),需要引入

// TodoList.js
import React,{ Component, Fragment } from 'react';

class TodoList extends Component {
  render(){
    return (
      <Fragment>
        <div>
          <input />
          <button>提交</button>
        </div>
        <ul>
          <li>学英语</li>
          <li>Learning React</li>
        </ul>
      </Fragment>
    );
  }
}

export default TodoList;

3-2 React 中的响应式设计思想和事件绑定

• React是响应式系统，不直接操作DOM，强调的是操作数据，通过数据的变化，自动感知数据自动的变化，生成DOM。
• 不需要关注DOM操作，只需要关注数据层的操作。
• 组件的状态：this.state
• JSX：变量用大括号
• 事件监听，input框数据改变：onChange={}，需要绑定
• 状态改变通过setState

// TodoList.js
import React,{ Component, Fragment } from 'react';

class TodoList extends Component {
  constructor(props){
    super(props);
    this.state = {
      inputValue: 'hello!!!!!',
      list: []
    }
  }

  render(){
    return (
      <Fragment>
        <div>
          <input 
            value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}
           />
          <button>提交</button>
        </div>
        <ul>
          <li>学英语</li>
          <li>Learning React</li>
        </ul>
      </Fragment>
    );
  }
  
  handleInputChange(e){ 
    // console.log(e); // e是事件对象
    // console.log(e.target); // e.target  真正点击的目标,是真正触发事件的对象,DOM中的节点
    // console.log(e.target.value); // 拿到新输入的内容    
    // this.state.inputValue = e.target.value; // this 指向undefined
    // console.log(this); // undefined 
    // 要想this指向组件，需要事件绑定 
    // this.handleInputChange.bind(this) 改变input的指向，改变状态，不能通过引用的方式改变，可通过setState()
    this.setState({
      inputValue: e.target.value  // 改变inputValue的值
    })
  }
}

export default TodoList;