React Hook学习

174

前言

看了很多文章，初步感受： hook 是react 的未来。
 有两个好处是显而易见的：一是提升代码的可读性，二是减少组件嵌套。

基础内容

useState 状态钩子

以官网 demo 举例：
 useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。 

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);

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

useEffect 副作用钩子

useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的。 

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

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

  // 相当于 componentDidMount 和 componentDidUpdate:
  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>
  );
}

useEffect 还可以有第二个参数，来指定如何“清除”副作用

useContent 共享状态钩子

（例子来自博客：https://www.ruanyifeng.com/blog/2019/09/react-hooks.html）
 多个组件间需要共享数据时，需要用到这个勾子 

<div className="App">
  <Navbar/>
  <Messages/>
</div>

比如 和 需要用同一个数据

先创建一个 context 

const AppContext = React.createContext({});

再 Provider 出来 

<AppContext.Provider  value={{
  username: 'superawesome'
}}>
    <div className="App">
        <Navbar/>
        <Messages/>
    </div>    
</AppContext>

现在就可以在组件中使用 useContext 来获取状态了，比如在 Navbar 中 

const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

自定义 hook

两个规则

  • 只能在函数最外层调用，不要再条件、循环、子函数内使用
  • 只能在 React 的函数组件中使用
Comments
Write a Comment