React使用技巧

1. 一个变量可能经常发生改变，且只在很少的页面使用到，可以单独抽离hook，并存储到redux中
2. 不怎么变化的，可以直接放在util中初始化时引入方法获取，然后存储到redux或provider中

1. useState中的setXxx函数是异步的

function Count {
  const [ count, setCount ] = useState(0)
  const increment = () => {
    setCount(count + 1) // setCount是异步的
    console.log(count) // 打印还是旧值
  }
  return <button onClick={increment}></button>
}

2. setState函数式更新可以拿到上一次的值

setCount(preValue => preValue + 1)

3. 惰性初始化state

// 如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state,此函数只在初始渲染时被调用
const [state, setState] = useState(() => { 
  const initialState = someExpensiveComputation(props);
  return initialState;
});

4. State为对象时，更新值需要手动合并对象

const [params, setParams] = useState(initParams)
const addM = () => {
  setParams((state) => {
    // return { m: state.m+1 } // 错误
    return { ...state, m: state.m+1 }
  });
};

5. ref中的变量发生改变不会触发组件重渲染

const numberRef = useRef(0)
const addNumber = () => {
  numberRef.current += 1;
  console.log(`numberRef.current:${numberRef.current}`);
};

6. 用ref获取上一轮的 props 或 state

const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
  prevCountRef.current = count;
});
const prevCount = prevCountRef.current; // 这个拿到的永远是上一轮渲染的值，用ref获取上一轮的 props 或 state

7. useImperativeHandle使得父组件通过ref可以调用到子组件的方法

function App() {
  const inputRef = useRef(null);
  useLayoutEffect(() => {
    inputRef.current.focus() // 可以调用子组件的中input实例的focus方法
  }) 
  return <FancyInput ref={inputRef} />
}
  
function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

8. Callback ref：每当dom变化时都可以收到通知，实现及时测量到真实dom的大小

function MeasureExample() {
  const [height, setHeight] = useState(0);

  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <>
      <h1 ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(height)}px tall</h2>
    </>
  );
}

9. useReducer惰性初始化

function init(initData) {
  return { xxx }
}
function reducer(state, action) {
  // todo 
}
function App ({initData}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
  	<div>{state.xxx}</div>
  )
}

赏

谢谢老板打赏，祝老板永无BUG

微信