React Hook初体验

一、useState

1.初始化

const [state, setState] = useState(initialState);

2.函数式更新

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
       setCount(initialCount)}>Reset
       setCount(prevCount => prevCount - 1)}>-
       setCount(prevCount => prevCount + 1)}>+
    
  );
}

1. setCount：可以直接赋值 setCount(initialCount)
2. setCount：者执行一个回调函数setCount(prevCount => prevCount + 1)

3. 惰性初始state

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

1. initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。

二、useEffect

useEffect(()=>{},[]);

1. 清除effect

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 清除订阅
    subscription.unsubscribe();
  };
});

结合effect执行时机，return 的作用是清除当前订阅。例如定时器操作等。

2. 执行时机

在浏览器完成布局与绘制之后，传给 useEffect 的函数会延迟调用。这使得它适用于许多常见的副作用场景。

3. 条件执行

通过设置依赖，决定该effect是否执行。
如果设置依赖为空数组[],，effect 内部的 props 和 state 就会一直持有其初始值。只执行一次？？