组件

如果我们写一个功能复杂的页面，都写在 js 里，那么你的文件将会变成下面这个样子：

render 函数里面将会有一坨的代码，非常不优雅
但是此时就有一个奇怪的现象，为什么同样的 html 代码写在 html 文件里面就不会觉得丑呢？
因为国际惯例认为习惯， js 文件一般不会这么复杂，所以产生了组件的概念。

我们把代码分开（为做演示，先暂时放在一个文件里面）

但是此时遇到一个 bug 当我点击 ➕1 的时候，两个组件同时加了1：

让我们来整理一下逻辑：点击 ➕1 以后，变量 number 加1，接着执行 render 函数，box1 和 box2 同时重新渲染，因为用的同一个变量 number 所以结果就是两个组件同时加上了1。

所以我们试试给他们两个组件各自的变量和函数。

虽然解决了 “bug”， 但是变成了这个样子，代码已经惨不忍睹了（全局变量太多了）。

此时能不能用函数传参试试呢，在 react 里面也就是 props，
让我们先试试用函数传参把~
我们给这两个组件各自的名字

通过函数传参，我们分别给这两个组件各自的名字，
这也就是 react 另一个聪明之处，他把属性理解为对象的key和value，与js的对象完美对应起来了，
既然可以传 name 了，那我们能不能现在传 number 呢？

答案是不行。因为 react 规定，永远不要试图去改变别人船费你的 props。

但是这该怎么办呢？我们怎么优雅的给这两个组件各自的 number 呢？

Class

js 里面有什么东西又能满足函数的功能，又可以有自己的作用域、变量 呢

###于是这里就用上了 class

试图用 class 改写刚刚的代码

react 规定，变量必须放在 this.state 里面，更改变量必须通过 this.setState 方法，否则无法自动更新dom。

注意 this.setState 有可能是异步的，所以你无法像这样写 ➕2 的代码

1
2
3
4
5
6
7
8
clickAdd(){
    this.setState({
      number: this.state.number + 1
    })
    this.setState({
      number: this.state.number + 1
    })
  }

此时你应当使用 this.setState 的回调函数形式

1
2
3
4
5
6
7
8
this.setState({
  number: this.state.number + 1
})
this.setState((state) => {
  return {
    number: state.number + 1
  }
})

本文完。

再续

1
2
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.9.0/umd/react.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.9.0/umd/react-dom.development.js"></script>

继续使用 hooks 改写

再来看一个平平无奇的表单
来封装一个hooks 版本的表单把