08.静态组件和动态组件

Posted on In , ,

静态组件

函数组件是静态组件如何理解？
让我们先来试试这个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// src\components\Vote.jsx
const Vote = function Vote(props) {
    let { title } = props;
    let supNum = 10,
        oppNum = 5;

    return <div className="vote-box">
        <div className="header">
            <h2 className="title">{title}</h2>
            <span>{supNum + oppNum}人</span>
        </div>
        <div className="main">
            <p>支持人数：{supNum}人</p>
            <p>反对人数：{oppNum}人</p>
        </div>
        <div className="footer">
            <button onClick={() => {
                supNum++;
                console.log(supNum);
            }}>支持</button>

            <button onClick={() => {//合成事件中后序学习
                oppNum++;
                console.log(oppNum);
            }}>反对</button>
        </div>
    </div>;
};
export default Vote;

调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//src\index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import Vote from './component/Vote';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <>
        <Vote title="React其实还是很好学的!" />
    </>
);

setTimeout(() => {
    root.render(
        <>
            <Vote title="我是五秒后传递的标题" />
        </>
    );
}, 5000);

可以见到，视图是渲染出来了，但点击按钮只能后台打印，与我们所设计的点击按钮后还渲染视图不符。

静态组件的特点

让我们先看看函数组件渲染的过程：

  1. 第一次渲染组件，把函数执行
  • 产生一个私有的上下文：EC(V)（随便取的名字指大函数）
  • 把解析出来的props(含children)传递进来(会被冻结)。
  • 对函数返回的JSX元素(virtualDOM)进行渲染
  1. 当我们点击按钮的时候，会把被绑定函数执行：
  • 修改上级上下文EC(V)中的变量
  • 私有变量值发生了改变
  • 但是“视图不会更新”
  • 也就是，函数组件第一次渲染完毕后，组件中的内容，不会根据组件内的某些操作，再进行更新，所以称它为静态组件
  • 除非在父组件中，重新调用这个函数组件（可以传递不同的属性信息）

总结一下：

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

一个简单的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
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;

解决办法

大部分需求，都需要在第一次渲染完毕后，基于组件内部的某些操作，让组件可以更新，以此呈现出不同的效果：
动态组件
方法：类组件、Hooks组件(在函数组件中，使用Hooks函数)

敬请期待——