React Hooks 学习笔记

2019-07-10

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本篇主要记录一下React Hooks中的学习笔记。

类组件的不足

  • 缺少复用机制
  • 渲染属性和高阶组件导致层级冗余
  • 生命周期函数混杂不相干逻辑
  • 相干逻辑分散在不同生命周期

使用useState

useState 是允许你在 React 函数组件中添加 state 的 Hook。

import React, { useState } from "react";

export default function App() {
  // useState唯一的参数就是初始 state
  // useState返回的是当前state以及更新state的函数
  // 我们在函数组件中存储内部 state。
  const [count, setCount] = useState(0);
  const [name, setName] = useState("changjun");
  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      {name},{count}
    </button>
  );
}

useEffect

Effect Hook 可以让你在函数组件中执行副作用操作

import React, { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("changjun");
  const [size, setSize] = useState({
    width: document.body.clientWidth,
    height: document.body.clientHeight
  });

  const onResize = () => {
    setSize({
      width: document.body.clientWidth,
      height: document.body.clientHeight
    });
  };

  // React 组件需要在渲染后执行某些操作并且在执行 DOM 更新之后调用它
  // 放在组件内部让我们可以在 effect 中直接访问tate 变量
  // Hook 使用了 JavaScript 的闭包机制
  // 默认情况下useEffect会在每次渲染后执行
  useEffect(() => {
    document.title = `${count}`;
  });

  useEffect(() => {
    window.addEventListener("resize", onResize, false);
    //  effect 可选的清除机制
    // 每个 effect 都可以返回一个清除函数
    // React 会在组件卸载的时候执行清除操作。
    return () => {
      window.removeEventListener("resize", onResize, false);
    };
    // 只运行一次的effect仅在组件挂载和卸载时执行)
  }, []);

  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      {name},{count},{size.width},{size.height}
    </button>
  );
}

Hook 允许我们按照代码的用途分离他们。 React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。

useContext

接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

import React, { useState, useEffect, createContext, useContext } from "react";

const CountContext = createContext();

function Counter() {
  const count = useContext(CountContext);
  return <h1>{count}</h1>;
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button type="button" onClick={() => setCount(count + 1)}>
        {count}
      </button>
      <CountContext.Provider value={count}>
        <Counter></Counter>
      </CountContext.Provider>
    </div>
  );
}

其它

本篇笔记总结下来觉着还是不是很好,因为我觉着最好的学习还是实践,等通过自己的实践之后对React Hooks 有了更好的认识之后再来重新对这篇进行记录。