README.md

variable

特性	plain variable	state	ref
渲染后引用是否相同	❎	❎	✔
是否可以update	❎	✔	✔

useContext vs redux

• useContext的变化会引起中间组件的重新渲染
• store的变化只会引起相关组件的重新渲染

useRef

• 持久化的引用，只有current可用
• 可以用来获取或者添加dom node

useMemo vs useCallback vs memo

• useMemo用来缓存昂贵计算的值, 也可以缓存组件
• useCallback用来持久化函数的引用
• memo用来缓存组件, 可以避免由父组件渲染引起的不必要的子组件渲染

useEffect vs useLayoutEffect

• useEffect 和 useLayoutEffect 的区别
• react hook——你可能不是“我”所认识的useEffect

useContext

• 创建context
  • defaultContext是在没有provider的情况下，传给consumer或者useContext的默认值，但是是不可变的，无法通过setContext来变更。

// userContext.js
import { createContext } from 'react';

const UserContext = createContext([
  {
    firstName: 'Bob',
    lastName: 'Bobberson',
    suffix: 1,
    email: 'bobberson@example.com'
  },
  obj => obj
])
const { Provider } = UserContext;
export { Provider, UserContext }

• 创建Provider

const UseContext = () => {
  // 这个才是人类理解的默认值，可通过setContext来变更
  const user = useState({
    firstName: 'James',
    lastName: 'Tan',
    suffix: 1,
    email: 'james@example.com'
  })

  return (
    <div>
      <Provider value={user}>
        <h1>1st level</h1>
        <Level2></Level2>
      </Provider>
    </div>
    //  
  )
}

• 创建Consumer

const Level5 = () => {
  // 接收context
  const [user, setUser] = useContext<any>(UserContext);
  return (
    <div>
      <h5>{`${user.firstName} ${user.lastName} the ${user.suffix} born`}</h5>
      <button onClick={() => { setUser({ ...user, suffix: user.suffix + 1 }) }}>Increment</button>
    </div>
  )
}

forwardRef

• 能够跟useRef一起获得子组件的DOM
• 在父组件创建ref,传递到子组件, 在父组件获取DOM

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

useImperativeHandle

• 结合useRef和forwardRef, 允许子组件将操作自身DOM的函数传递给父组件(向上传递)

零碎

• htmlFor for for
• Context + useReducer = Redux; 其实还是redux的方案更好，context其实只是props多层传递的一种简化而已。
• styled-component: emotion.sh 将css复用粒度提升tag层面到了component层面，但是加快了开发速度，可以适用于小型项目。
• styled-component高亮插件: vscode-styled-component
• sass: yarn add node-sass
• setState: hooks是function之外的又一层，写在代码里的顺序，不一定是它真实的执行顺序