react 使用hooks

Posted 2021-01-27 ajanuw

react hooks文档

λ yarn add [email protected]
λ yarn add [email protected]

设置 state

import React, { useState } from "react";
const l = console.log;

function Test() {

  const [n, setN] = useState(0);
  const [info, setInfo] = useState({
    name: "ajanuw",
  });

  function handleAddN() {
    setN(n + 1);
  }
  function handleInputChange(e) {
    setInfo({
      ...info,
      name: e.target.value,
    });
  }

  return (
    <div>
      <p>test</p>
      <p>{n}</p>
      <button onClick={handleAddN}>click me</button>
      <hr />
      <input type="text" value={info.name} onChange={handleInputChange} />
    </div>
  );
}

useEffect 钩子

它像是 componentDidMount, componentDidUpdate, and componentWillUnmount 这3个钩子
他将在第一次渲染运行，状态改变时运行，返回一个函数来做到 componentWillUnmount 里面做的一些事情
可以执行多个
第2个参数可以监听指定的数据更新才执行

import React, { useState, useEffect } from "react";
const l = console.log;
function Test() {
  const [age, setAge] = useState(0);
  const [info, setInfo] = useState({
    name: "ajanuw",
  });

  useEffect(
    () => {
      document.title = `hello ${info.name}`;
      let timer = setTimeout(() => {
        document.title = `react app`;
      }, 2000);

      return () => {
        l("卸载");
        clearTimeout(timer);
      };
    },
    [info],
  );

  useEffect(
    () => {
      l("只有age状态更新，才能执行");
    },
    [age],
  );

  function handleInputChange(e) {
    setInfo({
      ...info,
      name: e.target.value,
    });
  }

  return (
    <div>
      <input type="text" value={info.name} onChange={handleInputChange} />
    </div>
  );
}

编写自己的 hooks

就类似编写 高阶组件和渲染组件差不多

function Test() {
  const [age, setAge] = useState(0);
  const ajanuw = useInput("ajanuw");
  const suou = useInput("suou");

  useEffect(
    () => {
      l("只有age状态更新，才能执行");
    },
    [age],
  );

  return (
    <div>
      <input type="text" {...ajanuw} />
      <br />
      <input type="text" {...suou} />
    </div>
  );
}

function useInput(iv) {
  const [info, setInfo] = useState({
    name: iv,
  });

  useEffect(
    () => {
      document.title = `hello ${info.name}`;
      let timer = setTimeout(() => {
        document.title = `react app`;
      }, 2000);
      return () => {
        clearTimeout(timer);
      };
    },
    [info],
  );

  function handleInputChange(e) {
    setInfo({
      ...info,
      name: e.target.value,
    });
  }

  return {
    value: info.name,
    onChange: handleInputChange,
  };
}