react-hook使用

Hook的基本概念

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook的中 useState 使用

import React, { useState } from 'react';

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);
  //也可以这样使用
  const [coordinates, setCoordinates] = useState({x:0,y:0});

  return (
    <div>
      <p>You clicked {count} times,{coordinates.x}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hook的中 useEffect 使用

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

function Example() {
  const [count, setCount] = useState(0);

  // 类似于componentDidMount和componentDidUpdate
  // count 中的值每次变化都会重新进行渲染
  useEffect(() => {
    //使用浏览器API更新文档标题
    document.title = `You clicked ${count} times`;
  });
  // 或者 只在数据加载时渲染，更新时不渲染，[]中可以放参数如：[count]每当count值变化useEffect执行。
  useEffect(() => {
    //使用浏览器API更新文档标题
    document.title = `You clicked ${count} times`;
  },[]);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

如果引用Hook组件时名称必须是use开头