4.React会自动响应数据变化。this.state代表组件的状态。 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

import React, { Component, Fragment } from "react";

class TodoList extends Component {
    // 每个类都有一个构造函数 constructor
    // 由于TodoList类继承自 Component类，所以通常需要调用下父类的构造函数。super()代表父类的构造函数。
    // props代表接收的参数。[固定写法]
    constructor(props) {
        super(props)
        // 数据需要被定义在组件的状态(this.state)中.
        // this.state代表组件 TodoList的状态. this.state负责存储组件中的数据。
        this.state = {
            inputValue: 'hello',
            list: []
        }
    }
  render() {
    return (
      <Fragment>
        <div>
            {/* React能够自动感知数据的变化，并把数据自动更新到页面上。*/}
            {/* 或者说，数据一变化，页面就会自动响应数据的变化。[react名字的由来] */}
          <input value={this.state.inputValue} />
          <button>提交</button>
        </div>
        <ul>
            <li>学英语</li>
            <li>学React</li>
        </ul>
      </Fragment>
    );
  }
}

export default TodoList;