React概念理解

1 useEffect

文章推荐

1. https://segmentfault.com/a/1190000018639033
2. https://juejin.cn/post/7044161793471545381

  useEffect(() => {console.log('====111111======');return () => {console.log('=======222222=======');};});在每次代码刷新时候都会打印111111和222222

const [state, dispatch] = useReducer((oldState, payload) => {if (payload.type === 'tick') {return {...oldState,count: oldState.count + oldState.step,};}return {...oldState,};},{ count: 0, step: 1, type: '' },);useEffect(() => {console.log('========111111======');const id = setInterval(() => {console.log('========222222======', state.count);dispatch({ type: 'tick' }); }, 1000);return () => {console.log('========333333======', state.count);clearInterval(id);};}, [dispatch]);<h1>{state.count}</h1>console.log('========111111======'); 只会执行一次，****说明每次返回的dispatch都是同一个函数。console.log('========222222======', state.count);会被多次执行，但是打印出来的state.count会一直是0 （因为Capture Value的原因）console.log('========333333======', state.count); 不会执行，页面其他state更新它也不受影响
页面其他state更新不会影响到上面useEffect内部执行。h1标签里面的值会正常一秒增加一次。可以把上面理解成一个小型的Redux。