React开发实践（2）react起步

class TodoList extends Component {
  render() {
    return (
      <>
        <div>
          <input />
          <button>submit</button>
        </div>
        <ul>
          <li>打游戏</li>
          <li>学习</li>
        </ul>
      </>
    );
  }
}
export default TodoList;
复制代码

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      toDoList: [],
    };
  }
  handleInputChange = (e) => {
    this.setState({
      inputValue: e.target.value,
    });
  };
  render() {
    return (
      <>
        <div>
          <input
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <button>submit</button>
        </div>
        <ul>
          <li>打游戏</li>
          <li>学习</li>
        </ul>
      </>
    );
  }
}
export default TodoList;
复制代码

1、value 数据取决于 state里的 inputValue
  2、不能使用 this.state.inputValue = xxx 这种形式改变 state
  3、需要注意 绑定事件 this 指向问题，通常使用 bind / 箭头函数 () => {xx}
复制代码

import React, { Component } from "react";
class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      toDoList: [],
    };
  }
  handleInputChange = (e) => {
    this.setState({
      inputValue: e.target.value,
    });
  };
  handleButtonClick = () => {
    this.setState({
      toDoList: [...this.state.toDoList, this.state.inputValue],
      inputValue: "",
    });
  };
  render() {
    return (
      <>
        <div>
          <input
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <button onClick={this.handleButtonClick}>submit</button>
        </div>
        <ul>
          {this.state.toDoList.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </>
    );
  }
}
export default TodoList;
复制代码

1、先拆分成小项
  2、父组件 通过属性给子组件传递内容，子组件通过 this.props.xxx 进行接收
  3、并且 子组件 可以调用 父组件的方法（但需要注意 父组件传递方法时 需要进行 this 绑定操作，否则 会出错，将this 绑定自身 ）
复制代码

import React, { Component } from "react";
class ToDoItem extends Component {
  handleItem = () => {
    const { index, handleContentClick } = this.props;
    handleContentClick(index);
  };
  render() {
    const { item } = this.props;
    return <div onClick={this.handleItem}>{item}</div>;
  }
}
export default ToDoItem;
复制代码

0、return 里面的东西简化，将逻辑放到一个函数中 
    1、将bind 绑定 放到 constructor 中(就不移动了)
    2、this.setState 更改为 函数写法 （有些作用）
    3、map 便利 加 key （加了）
复制代码

1、组件都是 大写开头的，h5 标签小写字母开头
  2、父子组件 通信方式
      1、父 ---> 子    直接 props 传值
      2、子 ---> 父  子组件想改变父组件方法怎么处理 ？ 调用父组件传递来的方法，间接改变父组件的状态 
复制代码