React框架-函数组件与类组件学习

---

一、类组件

类组件的代码使用方式如下所示：

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0
    };
  }

  add() {
    this.setState({ n: this.state.n + 1 });
  }

  render() {
    return (
      <div className="Son">
        儿子n :{this.state.n}
        <button onClick={() => this.add()}>+1</button>
        <Grandson />
      </div>
    );
  }
}

1.类组件创建类后必须要继承React.Component

2.必须要有render 函数，返回的是react标签

3.render 中必须有return

 ReactDOM.render('类组件名', 'DOM对象')
        /*
        react可以调用ReactDOM.render方法将自定义的类组件放入真实dom中进行渲染，具体步骤如下所示：
        1.react解析组件标签，判断组件类型，类组件自动new一个类组件实例
        2。调用类组件中的render函数
        3.将render中返回的虚拟dom渲染到真实dom中
        */

二、函数组件

const Grandson = () => {
  const [n, setN] = React.useState(0);
  return (
    <div className="Grandson">
      孙子n:{n}
      <button onClick={() => setN(n + 1)}>+1</button>
    </div>
  );
};

函数组件也跟类组件一样使用ReactDOM.render方法在真实DOM容器中进行渲染
注意! 在函数组件中的this指向并不是指向window，因为react开启了Babel严格模式，严格模式最大的特点就是禁止this指向window；因此在函数组件中this指向undefined

---

二者的区别所在

1.类组件有生命周期，函数组件没有

2.类组件需要继承 Class，函数组件不需要

3.类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行

4.类组件内部可以定义并维护 state， 函数组件为无状态组件（可通过hooks进行实现）

相比较类组件，函数组件优点是更加轻量与灵活，便于逻辑的拆分复。

函数组件捕获了渲染时所使用的值，这是两类组件最大的不同。
React框架做的本质工作就是吃入数据，吐出UI，把声明式的代码转换为命令式的 DOM 操作，把数据层面的描述映射到用户可见的 UI 变化中去。
React的数据是和渲染绑定在一起的，而类组件是无法做到这一点