精选留言(6)

• 

  桃翁

  useRef 如果只是用来 在多次渲染之间共享数据，是不是直接可以把变量定义到组件外面，这样也可以达到目的，感觉还更方便一点呢。

  作者回复: useRef 可以保证这个变量只在当前组件的实例中使用。也就是说，如果一个组件页面上有多个实例，比如：
  <div><Timer /><Timer /></div>
  那么组件外的普通变量是被 Timer 共享的，就会产生问题。

  2021-06-01

  

  
• 

  aloha66

  如果通过useMemo，依赖数组是容器组件的state,来优化展示组件的渲染，这个方案可行吗？
   const ItemRender = useMemo(() =><ComA {...props}/>},[state])
  ...
  {ItemRender}

  2021-06-01

  

  
• 

  Sunny

  import React, {
    useCallback,
    useRef,
    useReducer,
  } from 'react';
  
  const initialState = {time: 0};
  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return {time: state.time + 1};
      default:
        throw new Error();
    }
  }
  
  export default function Timer() {
    console.log('--render--')
  
    const [state, dispatch] = useReducer(reducer, initialState);
    
    const timer = useRef(null);
  
    const setIntervalCallback = useCallback( () => {
      dispatch({type: 'increment'});
      console.log('setinterval time:', state.time) //为什么这里的state.time不变？
    }, [state.time]);//这里的state.time变化被监听到了
  
    const handleStart = useCallback(() => {
      console.log('handlestart')
      timer.current = window.setInterval(setIntervalCallback, 1000);
    }, [timer, setIntervalCallback]);
    
    const handlePause = useCallback(() => {
      console.log('handlePause')
      window.clearInterval(timer.current);
      timer.current = null;
    }, [timer]);
    
    return(
      <div>
        {state.time} seconds.
        <MyStartBtn handleStart={handleStart}/>
        <MyPauseBtn handlePause={handlePause}/>
      </div>
    );
  }
  
  function StartButton({handleStart}){
    console.log('startButton render --')
    return <button onClick={handleStart}>Start</button>;
  }
  const MyStartBtn = React.memo(StartButton, (prevProps, nextProps) => {
    return prevProps.handleStart === nextProps.handleStart;
  });
  
  function PauseButton({handlePause}){
    console.log('pauseButton render --')
    return <button onClick={handlePause}>Pause</button>;
  }
  const MyPauseBtn = React.memo( PauseButton, (prev, next) => {
    return prev.handlePause === next.handlePause;
  })
  
  /*
  console.log打印结果：
  --render--
  startButton render --
  setinterval time: 0
  每秒循环打印上面3行...
  
  
  疑问：
  const setIntervalCallback = useCallback( () => {
      dispatch({type: 'increment'});
      console.log('setinterval time:', state.time) //为什么这里的state.time不变？
    }, [state.time]);//这里的state.time变化被监听到了
  */

  2021-06-01

  

  
• 

  cyh41

  是任何场景 函数都用useCallback 包裹吗？那种轻量的函数是不是不需要？

  2021-06-01

  

  
• 

  满月

  我们能否用 state 去保存 window.setInterval() 返回的 timer 呢？
  我理解的是可以，只是没有 useRef 更优，因为在更新 state 值后会导致重新渲染，而 ref 值发生变化时，是不会触发组件的重新渲染的，这也是 useRef 区别于 useState 的地方。

  2021-06-01

  

  
• 

  Geek_71adef

  1 useState 实现组件共享，考虑到组件之间的通信
  2 state 去保存的话 会造成异步渲染 造成无限循环

  2021-06-01

  

  