首页 > 其他分享 >React函数式组件渲染顺序探究（Demo）

React函数式组件渲染顺序探究（Demo）

时间：2023-07-24 18:22:18浏览次数：42  
标签：child1 child2 Demo Component effect React state clean 组件

参考资料：
React渲染顺序及useEffect执行顺序探究（含并发模式）

code

import { useEffect, useState } from "react";
import { Button } from "antd";

function Component({ name, children }) {
    const [state, setState] = useState(() => {
        console.log(`Component ${name} initialize state`);
        return 0;
    });

    console.log(`Component ${name} body`);

    useEffect(() => {
        console.log(`Component ${name} all effect`);

        return () => {
            console.log(`Component ${name} all clean`);
        };
    });

    useEffect(() => {
        console.log(`Component ${name} empty effect`);

        return () => {
            console.log(`Component ${name} empty clean`);
        };
    }, []);

    useEffect(() => {
        console.log(`Component ${name} state effect`);

        return () => {
            console.log(`Component ${name} state clean`);
        };
    }, [state]);

    return (
        <div>
            Component {name}: {state}{" "}
            <Button onClick={() => setState(state + 1)}>Add</Button>
            {children}
        </div>
    );
}

function Component2({ name }) {
    const [state, setState] = useState(() => {
        console.log(`Component ${name} initialize state`);
        return 0;
    });

    console.log(`Component ${name} body`);

    useEffect(() => {
        console.log(`Component ${name} all effect`);

        return () => {
            console.log(`Component ${name} all clean`);
        };
    });

    useEffect(() => {
        console.log(`Component ${name} empty effect`);

        return () => {
            console.log(`Component ${name} empty clean`);
        };
    }, []);

    useEffect(() => {
        console.log(`Component ${name} state effect`);

        return () => {
            console.log(`Component ${name} state clean`);
        };
    }, [state]);

    return (
        <div>
            Component {name}: {state}{" "}
            <Button onClick={() => setState(state + 1)}>Add</Button>
            <Component name={`${name}-1 (${state})`}/>
            <Component name={`${name}-2 (${state})`}/>
        </div>
    );
}

function App() {
    console.log(`Parent body`);

    const [state, setState] = useState(() => {
        console.log(`Parent initialize state`);
        return 0;
    });

    useEffect(() => {
        console.log(`Parent empty effect`);

        return () => {
            console.log(`Parent empty clean`);
        };
    }, []);

    useEffect(() => {
        console.log(`Parent state effect`);

        return () => {
            console.log(`Parent state clean`);
        };
    }, [state]);

    useEffect(() => {
        console.log(`Parent all effect`);

        return () => {
            console.log(`Parent all clean`);
        };
    });

    const compo1 = (<Component name={`child1(${state})`}>
        <Component name={`child1-1(${state})`}/>
        <Component name={`child1-2(${state})`}/>
    </Component>);
    const compo2 = <Component2 name={`child2`}/>;
    const components = state % 2 === 0 ? [compo1, compo2] : [compo2, compo1];

    if (state % 3 !== 0) {
        components.push(<Component name={`child3`}/>);
    }

    return (
        <div>
            Parent: {state} <Button onClick={() => setState(state + 1)}>Add</Button>
            {components}
        </div>
    );
}

export default App;

result（React 16）

初始渲染：

# 递归执行函数体
Parent body 
Parent initialize state 
Component child1(0) initialize state 
Component child1(0) body 
Component child1-1(0) initialize state 
Component child1-1(0) body 
Component child1-2(0) initialize state 
Component child1-2(0) body 
Component child2 initialize state 
Component child2 body 
Component child2-1 (0) initialize state 
Component child2-1 (0) body 
Component child2-2 (0) initialize state 
Component child2-2 (0) body 
# 递归执行useEffect，同一个component有多个useEffect时，按它在代码中顺序执行
Component child1-1(0) all effect 
Component child1-1(0) empty effect 
Component child1-1(0) state effect 
Component child1-2(0) all effect 
Component child1-2(0) empty effect 
Component child1-2(0) state effect 
Component child1(0) all effect 
Component child1(0) empty effect 
Component child1(0) state effect 
Component child2-1 (0) all effect 
Component child2-1 (0) empty effect 
Component child2-1 (0) state effect 
Component child2-2 (0) all effect 
Component child2-2 (0) empty effect 
Component child2-2 (0) state effect 
Component child2 all effect 
Component child2 empty effect 
Component child2 state effect 
Parent empty effect 
Parent state effect 
Parent all effect

点child1-1的按钮，修改其state：

# 只有依赖项的useEffect被调用
Component child1-1(0) body 
Component child1-1(0) all clean 
Component child1-1(0) state clean 
Component child1-1(0) all effect 
Component child1-1(0) state effect

点child1的按钮，修改其state：

# 只有child1被重新渲染，因为child1的孩子是作为children传入的，不会被child1的state影响
Component child1(0) body 
Component child1(0) all clean 
Component child1(0) state clean 
Component child1(0) all effect 
Component child1(0) state effect

点child2的按钮，修改其state：

# child2重新渲染，导致child2-1和child2-2也重新渲染
# 先调用body
Component child2 body 
Component child2-1 (1) body 
Component child2-2 (1) body
# 调用clean
# 由于child2-1和child2-2的state都没变，不会调用多余的clean和useEffect
Component child2-1 (0) all clean 
Component child2-2 (0) all clean 
Component child2 all clean 
Component child2 state clean 
# 调用effect
Component child2-1 (1) all effect 
Component child2-2 (1) all effect 
Component child2 all effect 
Component child2 state effect

点Parent的按钮，修改其state，从而导致（1）child1和2交换顺序（2）child3出现

# 依次调用body，【注意！child1和child2重新mount了！】
Parent body 
Component child2 initialize state 
Component child2 body 
Component child2-1 (0) initialize state 
Component child2-1 (0) body 
Component child2-2 (0) initialize state 
Component child2-2 (0) body 
Component child1(1) initialize state 
Component child1(1) body 
Component child1-1(1) initialize state 
Component child1-1(1) body 
Component child1-2(1) initialize state 
Component child1-2(1) body 
Component child3 initialize state 
Component child3 body 
# clean函数
# 【注意！由于相当于老的child1和child2消失，所以此处还会调用它们的clean函数】
# 可以看到，child1带的state，是Parent state的旧值0
Component child1(0) all clean 
Component child1(0) empty clean 
Component child1(0) state clean 
Component child1-1(0) all clean 
Component child1-1(0) empty clean 
Component child1-1(0) state clean 
Component child1-2(0) all clean 
Component child1-2(0) empty clean 
Component child1-2(0) state clean 
Component child2 all clean 
Component child2 empty clean 
Component child2 state clean 
# 而child2-1和2-2带的是child2的state的旧值
# all在state更新后重新调用过，所以是最新的旧值1
Component child2-1 (1) all clean 
# 而其余2个是更老的旧值，这是因为useEffect虽然用了name做依赖，但并没有把它列成依赖项
# 所以它们只会取最后一次定义这个函数时的值
Component child2-1 (0) empty clean 
Component child2-1 (0) state clean 
Component child2-2 (1) all clean 
Component child2-2 (0) empty clean 
Component child2-2 (0) state clean 
Parent state clean 
Parent all clean 
# effect函数
Component child2-1 (0) all effect 
Component child2-1 (0) empty effect 
Component child2-1 (0) state effect 
Component child2-2 (0) all effect 
Component child2-2 (0) empty effect 
Component child2-2 (0) state effect 
Component child2 all effect 
Component child2 empty effect 
Component child2 state effect 
Component child1-1(1) all effect 
Component child1-1(1) empty effect 
Component child1-1(1) state effect 
Component child1-2(1) all effect 
Component child1-2(1) empty effect 
Component child1-2(1) state effect 
Component child1(1) all effect 
Component child1(1) empty effect 
Component child1(1) state effect 
Component child3 all effect 
Component child3 empty effect 
Component child3 state effect 
Parent state effect 
Parent all effect

把每个child都上状态之后，再点Parent按钮：



# Body，child1和2还是重新mount了
Parent body 
Component child1(2) initialize state 
Component child1(2) body 
Component child1-1(2) initialize state 
Component child1-1(2) body 
Component child1-2(2) initialize state 
Component child1-2(2) body 
Component child2 initialize state 
Component child2 body 
Component child2-1 (0) initialize state 
Component child2-1 (0) body 
Component child2-2 (0) initialize state 
Component child2-2 (0) body 
Component child3 body
# Clean
Component child2 all clean 
Component child2 empty clean 
Component child2 state clean 
Component child2-1 (1) all clean 
Component child2-1 (0) empty clean 
Component child2-1 (1) state clean 
Component child2-2 (1) all clean 
Component child2-2 (0) empty clean 
Component child2-2 (1) state clean 
Component child1(1) all clean 
Component child1(1) empty clean 
Component child1(1) state clean 
Component child1-1(1) all clean 
Component child1-1(1) empty clean 
Component child1-1(1) state clean 
Component child1-2(1) all clean 
Component child1-2(1) empty clean 
Component child1-2(1) state clean 
Component child3 all clean 
Parent state clean 
Parent all clean 
# effect
# 由于child3是重新渲染，所以只叫了一个effect
Component child1-1(2) all effect 
Component child1-1(2) empty effect 
Component child1-1(2) state effect 
Component child1-2(2) all effect 
Component child1-2(2) empty effect 
Component child1-2(2) state effect 
Component child1(2) all effect 
Component child1(2) empty effect 
Component child1(2) state effect 
Component child2-1 (0) all effect 
Component child2-1 (0) empty effect 
Component child2-1 (0) state effect 
Component child2-2 (0) all effect 
Component child2-2 (0) empty effect 
Component child2-2 (0) state effect 
Component child2 all effect 
Component child2 empty effect 
Component child2 state effect 
Component child3 all effect 
Parent state effect 
Parent all effect

  • 如果不希望重新mount

    可以把child1和child2加上key

    # body
Parent body 
Component child1(2) body 
Component child1-1(2) body 
Component child1-2(2) body 
Component child2 body 
Component child2-1 (1) body 
Component child2-2 (1) body 
Component child3 body 
# clean，是按effect的后序DFS
Component child1-1(1) all clean 
Component child1-2(1) all clean 
Component child1(1) all clean 
Component child2-1 (1) all clean 
Component child2-2 (1) all clean 
Component child2 all clean 
Component child3 all clean 
Parent state clean 
Parent all clean 
Component child1-1(2) all effect 
Component child1-2(2) all effect 
Component child1(2) all effect 
Component child2-1 (1) all effect 
Component child2-2 (1) all effect 
Component child2 all effect 
Component child3 all effect 
Parent state effect 
Parent all effect

继续上状态，继续点Parent：


# Body
Parent body 
Component child2 initialize state 
Component child2 body 
Component child2-1 (0) initialize state 
Component child2-1 (0) body 
Component child2-2 (0) initialize state 
Component child2-2 (0) body 
Component child1(3) initialize state 
Component child1(3) body 
Component child1-1(3) initialize state 
Component child1-1(3) body 
Component child1-2(3) initialize state 
Component child1-2(3) body 
# Clean
# 由于child3 unmount，所有clean都被调用
Component child1(2) all clean 
Component child1(2) empty clean 
Component child1(2) state clean 
Component child1-1(2) all clean 
Component child1-1(2) empty clean 
Component child1-1(2) state clean 
Component child1-2(2) all clean 
Component child1-2(2) empty clean 
Component child1-2(2) state clean 
Component child2 all clean 
Component child2 empty clean 
Component child2 state clean 
Component child2-1 (1) all clean 
Component child2-1 (0) empty clean 
Component child2-1 (1) state clean 
Component child2-2 (1) all clean 
Component child2-2 (0) empty clean 
Component child2-2 (1) state clean 
Component child3 all clean 
Component child3 empty clean 
Component child3 state clean 
Parent state clean 
Parent all clean 
# Effect
Component child2-1 (0) all effect 
Component child2-1 (0) empty effect 
Component child2-1 (0) state effect 
Component child2-2 (0) all effect 
Component child2-2 (0) empty effect 
Component child2-2 (0) state effect 
Component child2 all effect 
Component child2 empty effect 
Component child2 state effect 
Component child1-1(3) all effect 
Component child1-1(3) empty effect 
Component child1-1(3) state effect 
Component child1-2(3) all effect 
Component child1-2(3) empty effect 
Component child1-2(3) state effect 
Component child1(3) all effect 
Component child1(3) empty effect 
Component child1(3) state effect 
Parent state effect 
Parent all effect

再点Parent：

# BODY
...
Component child3 initialize state 
Component child3 body 
# Clean
...
# effect
...
Component child3 all effect 
Component child3 empty effect 
Component child3 state effect 
Parent state effect 
Parent all effect

result（React 18）

初始渲染：

# 递归执行函数体，可以看到每个body都被执行了2次！并且都是mount！
Parent body 
Parent initialize state 
Parent body 
Parent initialize state 
Component child1(0) initialize state 
Component child1(0) body 
Component child1(0) initialize state 
Component child1(0) body 
Component child1-1(0) initialize state 
Component child1-1(0) body 
Component child1-1(0) initialize state 
Component child1-1(0) body 
Component child1-2(0) initialize state 
Component child1-2(0) body 
Component child1-2(0) initialize state 
Component child1-2(0) body 
Component child2 initialize state 
Component child2 body 
Component child2 initialize state 
Component child2 body 
Component child2-1 (0) initialize state 
Component child2-1 (0) body 
Component child2-1 (0) initialize state 
Component child2-1 (0) body 
Component child2-2 (0) initialize state 
Component child2-2 (0) body 
Component child2-2 (0) initialize state 
Component child2-2 (0) body 
# 递归执行useEffect，同一个component有多个useEffect时，按它在代码中顺序执行
Component child1-1(0) all effect 
Component child1-1(0) empty effect 
Component child1-1(0) state effect 
Component child1-2(0) all effect 
Component child1-2(0) empty effect 
Component child1-2(0) state effect 
Component child1(0) all effect 
Component child1(0) empty effect 
Component child1(0) state effect 
Component child2-1 (0) all effect 
Component child2-1 (0) empty effect 
Component child2-1 (0) state effect 
Component child2-2 (0) all effect 
Component child2-2 (0) empty effect 
Component child2-2 (0) state effect 
Component child2 all effect 
Component child2 empty effect 
Component child2 state effect 
Parent empty effect 
Parent state effect 
Parent all effect 
# Clean
# Effect
Component child1-1(0) all clean 
Component child1-1(0) empty clean 
Component child1-1(0) state clean 
Component child1-2(0) all clean 
Component child1-2(0) empty clean 
Component child1-2(0) state clean 
Component child1(0) all clean 
Component child1(0) empty clean 
Component child1(0) state clean 
Component child2-1 (0) all clean 
Component child2-1 (0) empty clean 
Component child2-1 (0) state clean 
Component child2-2 (0) all clean 
Component child2-2 (0) empty clean 
Component child2-2 (0) state clean 
Component child2 all clean 
Component child2 empty clean 
Component child2 state clean 
Parent empty clean 
Parent state clean 
Parent all clean 
Component child1-1(0) all effect 
Component child1-1(0) empty effect 
Component child1-1(0) state effect 
Component child1-2(0) all effect 
Component child1-2(0) empty effect 
Component child1-2(0) state effect 
Component child1(0) all effect 
Component child1(0) empty effect 
Component child1(0) state effect 
Component child2-1 (0) all effect 
Component child2-1 (0) empty effect 
Component child2-1 (0) state effect 
Component child2-2 (0) all effect 
Component child2-2 (0) empty effect 
Component child2-2 (0) state effect 
Component child2 all effect 
Component child2 empty effect 
Component child2 state effect 
Parent empty effect 
Parent state effect 
Parent all effect

点child1-1的按钮，修改其state：与React 16一致

点child1的按钮，修改其state：：与React 16一致

点child2的按钮，修改其state：

# child2重新渲染，导致child2-1和child2-2也重新渲染
# 先调用body，调用了2次
Component child2 body * 2
Component child2-1 (1) body * 2
Component child2-2 (1) body * 2
# 调用clean
# 由于child2-1和child2-2的state都没变，不会调用多余的clean和useEffect
Component child2-1 (0) all clean 
Component child2-2 (0) all clean 
Component child2 all clean 
Component child2 state clean 
# 调用effect
Component child2-1 (1) all effect 
Component child2-2 (1) all effect 
Component child2 all effect 
Component child2 state effect

点Parent的按钮，修改其state，从而导致（1）child1和2交换顺序（2）child3出现

# 依次调用body，【注意！child1和child2重新mount了！】
Parent body * 2
Component child2 initialize state 
Component child2 body 
Component child2 initialize state 
Component child2 body 
Component child2-1 (0) initialize state 
Component child2-1 (0) body 
Component child2-1 (0) initialize state 
Component child2-1 (0) body 
Component child2-2 (0) initialize state 
Component child2-2 (0) body 
Component child2-2 (0) initialize state 
Component child2-2 (0) body 
Component child1(1) initialize state 
Component child1(1) body 
Component child1(1) initialize state 
Component child1(1) body 
Component child1-1(1) initialize state 
Component child1-1(1) body 
Component child1-1(1) initialize state 
Component child1-1(1) body 
Component child1-2(1) initialize state 
Component child1-2(1) body 
Component child1-2(1) initialize state 
Component child1-2(1) body 
Component child3 initialize state 
Component child3 body 
Component child3 initialize state 
Component child3 body 
# clean函数
# 【注意！由于相当于老的child1和child2消失，所以此处还会调用它们的clean函数】
# 可以看到，child1带的state，是Parent state的旧值0
Component child1(0) all clean 
Component child1(0) empty clean 
Component child1(0) state clean 
Component child1-1(0) all clean 
Component child1-1(0) empty clean 
Component child1-1(0) state clean 
Component child1-2(0) all clean 
Component child1-2(0) empty clean 
Component child1-2(0) state clean 
Component child2 all clean 
Component child2 empty clean 
Component child2 state clean 
Component child2-1 (1) all clean 
Component child2-1 (0) empty clean 
Component child2-1 (0) state clean 
Component child2-2 (1) all clean 
Component child2-2 (0) empty clean 
Component child2-2 (0) state clean 
Parent state clean 
Parent all clean 
# effect函数
Component child2-1 (0) all effect 
Component child2-1 (0) empty effect 
Component child2-1 (0) state effect 
Component child2-2 (0) all effect 
Component child2-2 (0) empty effect 
Component child2-2 (0) state effect 
Component child2 all effect 
Component child2 empty effect 
Component child2 state effect 
Component child1-1(1) all effect 
Component child1-1(1) empty effect 
Component child1-1(1) state effect 
Component child1-2(1) all effect 
Component child1-2(1) empty effect 
Component child1-2(1) state effect 
Component child1(1) all effect 
Component child1(1) empty effect 
Component child1(1) state effect 
Component child3 all effect 
Component child3 empty effect 
Component child3 state effect 
Parent state effect 
Parent all effect 
# 第二次clean，相当于新mount的组件都有第二次clean和effect
Component child2-1 (0) all clean 
Component child2-1 (0) empty clean 
Component child2-1 (0) state clean 
Component child2-2 (0) all clean 
Component child2-2 (0) empty clean 
Component child2-2 (0) state clean 
Component child2 all clean 
Component child2 empty clean 
Component child2 state clean 
Component child1-1(1) all clean 
Component child1-1(1) empty clean 
Component child1-1(1) state clean 
Component child1-2(1) all clean 
Component child1-2(1) empty clean 
Component child1-2(1) state clean 
Component child1(1) all clean 
Component child1(1) empty clean 
Component child1(1) state clean 
Component child3 all clean 
Component child3 empty clean 
Component child3 state clean 
# 第二次effect
Component child2-1 (0) all effect 
Component child2-1 (0) empty effect 
Component child2-1 (0) state effect 
Component child2-2 (0) all effect 
Component child2-2 (0) empty effect 
Component child2-2 (0) state effect 
Component child2 all effect 
Component child2 empty effect 
Component child2 state effect 
Component child1-1(1) all effect 
Component child1-1(1) empty effect 
Component child1-1(1) state effect 
Component child1-2(1) all effect 
Component child1-2(1) empty effect 
Component child1-2(1) state effect 
Component child1(1) all effect 
Component child1(1) empty effect 
Component child1(1) state effect 
Component child3 all effect 
Component child3 empty effect 
Component child3 state effect

把每个child都上状态之后，再点Parent按钮：

# Body，都叫2遍，并且child1和2还是重新mount，child3只update
Parent body * 2
Component child1(2) initialize state 
Component child1(2) body 
Component child1(2) initialize state 
Component child1(2) body 
Component child1-1(2) initialize state 
Component child1-1(2) body 
Component child1-1(2) initialize state 
Component child1-1(2) body 
Component child1-2(2) initialize state 
Component child1-2(2) body 
Component child1-2(2) initialize state 
Component child1-2(2) body 
Component child2 initialize state 
Component child2 body 
Component child2 initialize state 
Component child2 body 
Component child2-1 (0) initialize state 
Component child2-1 (0) body 
Component child2-1 (0) initialize state 
Component child2-1 (0) body 
Component child2-2 (0) initialize state 
Component child2-2 (0) body 
Component child2-2 (0) initialize state 
Component child2-2 (0) body 
Component child3 body * 2
# clean - unmount
Component child2 all clean 
Component child2 empty clean 
Component child2 state clean 
Component child2-1 (1) all clean 
Component child2-1 (0) empty clean 
Component child2-1 (1) state clean 
Component child2-2 (1) all clean 
Component child2-2 (0) empty clean 
Component child2-2 (1) state clean 
Component child1(1) all clean 
Component child1(1) empty clean 
Component child1(1) state clean 
Component child1-1(1) all clean 
Component child1-1(1) empty clean 
Component child1-1(1) state clean 
Component child1-2(1) all clean 
Component child1-2(1) empty clean 
Component child1-2(1) state clean 
# clean - update
Component child3 all clean 
Parent state clean 
Parent all clean
# effect 
Component child1-1(2) all effect 
Component child1-1(2) empty effect 
Component child1-1(2) state effect 
Component child1-2(2) all effect 
Component child1-2(2) empty effect 
Component child1-2(2) state effect 
Component child1(2) all effect 
Component child1(2) empty effect 
Component child1(2) state effect 
Component child2-1 (0) all effect 
Component child2-1 (0) empty effect 
Component child2-1 (0) state effect 
Component child2-2 (0) all effect 
Component child2-2 (0) empty effect 
Component child2-2 (0) state effect 
Component child2 all effect 
Component child2 empty effect 
Component child2 state effect 
Component child3 all effect 
Parent state effect 
Parent all effect 
# mount的组件的第二次clean
Component child1-1(2) all clean 
Component child1-1(2) empty clean 
Component child1-1(2) state clean 
Component child1-2(2) all clean 
Component child1-2(2) empty clean 
Component child1-2(2) state clean 
Component child1(2) all clean 
Component child1(2) empty clean 
Component child1(2) state clean 
Component child2-1 (0) all clean 
Component child2-1 (0) empty clean 
Component child2-1 (0) state clean 
Component child2-2 (0) all clean 
Component child2-2 (0) empty clean 
Component child2-2 (0) state clean 
Component child2 all clean 
Component child2 empty clean 
Component child2 state clean 
Component child1-1(2) all effect 
Component child1-1(2) empty effect 
Component child1-1(2) state effect 
Component child1-2(2) all effect 
Component child1-2(2) empty effect 
Component child1-2(2) state effect 
Component child1(2) all effect 
Component child1(2) empty effect 
Component child1(2) state effect 
Component child2-1 (0) all effect 
Component child2-1 (0) empty effect 
Component child2-1 (0) state effect 
Component child2-2 (0) all effect 
Component child2-2 (0) empty effect 
Component child2-2 (0) state effect 
Component child2 all effect 
Component child2 empty effect 
Component child2 state effect

标签：child1,child2,Demo,Component,effect,React,state,clean,组件
From： https://www.cnblogs.com/milliele/p/17577996.html

相关文章

  • FASTCGI组件漏洞
    CGIintroductioncommongatewainterface/CGIdescribesastardandfortransferringdatabetweenserverandclientprograms,allowingaclienttorequestdatafromaprogramrunningonanetworkserver viawebbrowserCGIisindependentofanylanguag......
  • 初级设计师必看的UI设计组件库
    UI组件库是一个可以理解为重复使用界面设计元素的集合，是一个文件库。UI组件库在整个系统中起着行为层面的作用，是团队内部设计师与开发者之间的横向合作，是保证产品产出一致的标准基础。即时设计资源社区提供丰富的组件库，包括不同行业、不同顶级互联网厂商的UI组件库！可以免费一键使......
  • vue组件封装 - 选择器远程搜索下拉列表
    <!--*component:人员选择-远程搜索下拉列表*time:2023/7/19*author:zx*使用方式*importPersonSelectfrom"@/components/Dialog/personSelect.vue";*components:{PersonSelect}*<person-selectv-model="test"/>--><......
  • vue组件封装 - 省市县下拉选联动
    改封装组件依赖element-china-area-data插件，引入组件可参照：https://www.npmjs.com/package/element-china-area-data<!--*component:省市县下拉选联动*time:2023/7/19*author:zx*使用方式:*importDialogAddressfrom"@/components/Dialog/dialogAddress.......
  • springCloud五大核心组件「建议收藏」
    大家好，又见面了。1.springCloud五大组件运行流程2.springcloud简单介绍SpringCloud是微服务架构的集大成者，将一系列优秀的组件进行了整合。基于springboot构建，对我们熟悉spring的程序员来说，上手比较容易。通过一些简单的注解，我们就可以快速的在应用中配置一下常用模块并构建庞......
  • Cilium 系列-3-Cilium 的基本组件和重要概念
    系列文章Cilium系列文章前言安装完了，我们看看Cilium有哪些组件和重要概念。Cilium组件如上所述，安装Cilium时，会安装几个运行组件（有些是可选组件）,它们各是什么用途？CiliumOperatorCiliumOperator可以理解为Cilium的管理平面或操作运维平面。CiliumOperator不......
  • Unity3D 使用带刚体组件的预制体配合脚本自动生成一面墙时上层墙体被弹飞
    异常效果如下图所示：预制体是一个正方体(Cube)，其参数设置如下图所示：控制墙面生成的C#脚本如下所示：usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassWall:MonoBehaviour{publicTransformbrick;//Usethisf......
  • SpringBoot自动化装配中，如何解决组件装配顺序
    SpringBoot自动化装配中，如果有两个AutoConfiguration，A依赖B，这时ConditionalOnBean如何保证顺序使需要的Bean会提前加载使用@AutoConfigureAfter,当几个组件加载完成后，再加载当前组件，如：Nacos服务注册自动配置类加载前需要加载：通用的服务注册配置，服务注册的自动化配置，服务发现的自......
  • Unity UGUI的RectMask2D（2D遮罩）组件的介绍及使用
    UnityUGUI的RectMask2D（2D遮罩）组件的介绍及使用1.什么是RectMask2D组件？RectMask2D是UnityUGUI中的一个组件，用于实现2D遮罩效果。它可以限制子对象在指定的矩形区域内显示，超出区域的部分将被遮罩隐藏。2.RectMask2D的工作原理RectMask2D组件通过裁剪子对象的渲染区域来实现......
  • Unity UGUI的LayoutElement（布局元素）组件的介绍及使用
    UnityUGUI的LayoutElement（布局元素）组件的介绍及使用1.什么是LayoutElement组件？LayoutElement是UnityUGUI中的一个布局元素组件，用于控制UI元素在布局中的大小和位置。它可以用于自动调整UI元素的大小，以适应不同的屏幕分辨率和布局需求。2.LayoutElement组件的工作原理Layou......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99