React.useState

• 惰性初始 state
• useEffect
• 传入空的依赖数组 []，意味着该 hook 只在组件挂载时运行一次,
• 返回的是一个取消订阅的函数
• 第二个参数是依赖项，只有在依赖项改变的时候数据才会改变

function App(props) {
    const [number1, setNumber1] = React.useState(0);
    //惰性初始 state
    //参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：
    const [state, setState] = React.useState(() => someExpensiveComputation(props));
    React.useEffect(
        () => {
            const subscription = props.source.subscribe();
            //  返回的是一个取消订阅的函数
            return () => {
                subscription.unsubscribe();
            };
        },
        //第二个参数是依赖项，只有在依赖项改变的时候数据才会改变
        [props.source],
    );
    //  传入空的依赖数组 []，意味着该 hook 只在组件挂载时运行一次,
    React.useEffect(
        () => {
            const subscription = props.source.subscribe();
            return () => {
                subscription.unsubscribe();
            };
        },
        [],
    );
    const handleClick = () => {
        setNumber1(number1 + 1);
    }
    return (
        <div>
            <p>number1:{number1}</p>
            <button onClick={handleClick}>+</button>
        </div>
    )
}