Skip to content

GeekEast/react-hooks-examples

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

  • 结合useRefforwardRef, 允许子组件将操作自身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之外的又一层,写在代码里的顺序,不一定是它真实的执行顺序