On this page

静态组件和动态组件

静态组件

函数组件是静态组件

不具备状态、生命周期函数、ref 等内容
第一次渲染完毕，除非父组件控制其重新渲染，否则内容不会再更新
优势：渲染速度快
弊端：静态组件，无法实现组件动态更新

Hooks 组件「推荐」：具备了函数组件和类组件的各自优势，在函数组件的基础上，基于 hooks 函数，让函数组件也可以拥有状态、周期函数等，让函数组件也可以实现自更新「动态化」！！

jsx

import React from "react";
const FunctionComponent = function FunctionComponent() {
    let num = 0;
    return <div>
        {num}
        <br />
        <button onClick={() => {
            num++;
            console.log(num); //变量值累加，但是组件不会重新渲染
        }}>增加</button>
    </div>;
};
export default FunctionComponent;

1
2
3
4
5
6
7
8
9
10
11
12
13

动态组件

类组件是动态组件

具备属性及规则校验
具备状态，修改状态可以控制视图更新
- setState
- forceUpdate
具备周期函数
- 严格模式下，一些不安全的周期函数是禁止使用的