React新特性-Hooks

Hooks

useState

useState是react自带的一个hook函数，它的作用是用来声明状态变量。

利用运行的顺序

useEffect

在用Class制作组件时，经常会用生命周期函数，来处理一些额外的事情（副作用：和函数业务主逻辑关联不大，特定时间或事件中执行的动作，比如Ajax请求后端数据，添加登录监听和取消登录，手动修改DOM等等）。在React Hooks中也需要这样类似的生命周期函数，比如在每次状态（State）更新时执行，它为我们准备了useEffect

useContext

在用类声明组件时，父子组件的传值是通过组件属性和props进行的，那现在使用方法(Function)来声明组件，已经没有了constructor构造函数也就没有了props的接收，那父子组件的传值就成了一个问题。React Hooks 为我们准备了useContext。这节课就学习一下useContext，它可以帮助我们跨越组件层级直接传递变量，实现共享。需要注意的是useContext和redux的作用是不同的，一个解决的是组件之间值传递的问题，一个是应用中统一管理状态的问题，但通过和useReducer的配合使用，可以实现类似Redux的作用。

• Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。

useReducer

useCallback

该回调函数仅在某个依赖项改变时才会更新

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

function changeCount(count){
        console.log('count')
        return count;
}
const actionCount = useMemo(changeCount(count),[count])

useMemo

传入 useMemo 的函数会在渲染期间执行

函数里不要执行与渲染无关的操作

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值

function changeCount(count){
        console.log('count')
        return count;
}
const actionCount = useMemo(()=>changeCount(count),[count])

useRef

自定义函数

官网的示例也很清楚

• 函数中先用useState设置size状态，然后编写一个每次修改状态的方法onResize，
• 使用useCallback，目的是为了缓存方法(useMemo是为了缓存变量)。 然后在第一次进入方法时用useEffect来注册resize监听时间。
• 为了防止一直监听所以在方法移除时，使用return的方式移除监听。最后返回size变量就可以了。

//自定义函数
const useSelfSize = () => {
  const [ size, setSize ] = useState({
    width: window.document.documentElement.clientWidth,
    height: window.document.documentElement.clientHeight
  });

  const handleOnSize = useCallback(() => {
    setSize({
      width: window.document.documentElement.clientWidth,
      height: window.document.documentElement.clientHeight
    })
  }, []);

  useEffect(() => {
    window.addEventListener('resize', handleOnSize);
    console.log('add');
    return () => {
      console.log('remove');
      window.removeEventListener('resize', handleOnSize);
    };
  }, [handleOnSize]);

  return size;
}
// 在组件中使用自定义函数
const SelfFunc = () => {
  const size = useSelfSize();
  return (
    <div>
      当前窗口的宽高为:{size.width}x{size.height}
    </div>
  )
}