Function ChildComponent

advanced_tutorial/src/cases/case3.tsx:18–36

(props: ChildComponentProps)

}

const ChildComponent = (props: ChildComponentProps) => {
    const [propsChangeCnt, setPropsChangeCnt] = useState<number>(0);
    useEffect(() => {
        setPropsChangeCnt(cnt => cnt + 1);
    }, [props.onChange]);

    const doSomethingSlowly = () => {
        sleep(500);
        return Math.random();
    };

    const cnt = doSomethingSlowly();

    return <Space>
        <p>运行结果: {cnt}</p>
        <p>Props 变更次数: {propsChangeCnt}</p>
        <Button onClick={props.onChange}>按下按钮</Button>
    </Space>
}

const OptimizedChildComponent = (props: ChildComponentProps) => {
    const [propsChangeCnt, setPropsChangeCnt] = useState<number>(0);