React开发实践（2）react起步1、经典案例之 todoList 写一个最简单的内容效果是这样的接下来我想

`1、经典案例之 todoList`

写一个最简单的内容


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

export default TodoList;

效果是这样的

接下来我想输入内容然后 submit 之后放在下面，怎么办？

`2、React 响应式思想及事件绑定`

首先 React 不直接操作 DOM，有个经典的公式 UX = F(data)，视图来自于数据变化
所以当前页面需要两部分数据，则需要定义两个数据
数据在哪里定义？


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}

`3、新增和删除列表项`

一个重要的内容这部分不能固定，我们需要map 遍历数据展示内容

我们还需要点击 submit 之后将内容提交到下方

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;

实现效果

非常 nice ！
删除功能怎么实现？
拿到每一项下标

`4、组件的拆分和组件间传值`

思路

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

代码时刻
ToDoItem.js

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;

父组件引入使用

非常nice ！

`5、代码优化一下`

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

注意还有 prevState

`6、关于 React 更多思考`

1、声明式的开发方式

与之对应的是命令式编程方式，比如 jQ， 80% 的时间我们在操作dom 做具体的事情
声明式编程，数据驱动视图的变化, 要做的是对数据的管理部分，组件自身的状态使用 state 管理，或者使用 redux 进行联合式管理方式

2、可以和其他框架一起使用

听起来挺神奇的事情，最常规思想，怎么做到这一点呢？

3、组件化思想

需要注意两件事情

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

4、单向数据流思想

为啥需要单向数据流？而且子组件绝对不能更改父组件传递来的数据
为了使得数据管理正常，不会出现很多的 bug，比如当前有一个父组件给多个子组件传递了同一个数据，一个子组件更改了传递的数据，则其他组件的数据也会更改，造成问题

5、视图层框架

复杂的组件间的信息传递交给 redux 这种状态管理来实现

6、函数式编程

类似 constructor 生命周期和其他的 handleXxxx 函数， renderXxxx 函数，都分成不同的函数部分，不同的函数模块，利于更改维护和自动化测试
比较重要的思想，可以将函数功能分开，一个函数做一件事情，并且可将复杂的函数进行拆分

撒花 🎉🎉🎉

更多项目请访问 github github.com/huanhunmao

gitee 项目地址 gitee.com/huanhunmao/…