react 官网学习

最新推荐文章于 2023-03-12 18:30:08 发布

MissXu666

最新推荐文章于 2023-03-12 18:30:08 发布

阅读量282

点赞数

分类专栏： react 文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/MissXu666/article/details/128719279

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

为什么要使用jsx

它是一种JavaScript语法的扩展，并且它具有JavaScript的所有特性。在React的开发中，React并不是强制要求一定要使用

 1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
 2. 它是类型安全的，在编译过程中就能发现错误，可以有效防止xss攻击（React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击）
 3. JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖使用 JSX编写模板更加简单快速，代码结构更加清晰；

关于 setState() 异步：

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。

this.setState({
  counter: this.state.counter + this.props.increment,
});

要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

为什么在react中不能直接return false 阻止默认行为

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}
因为react中的事件是合成事件，不同于原生事件，需要使用preventDefault();

类式组件中为什么要使用bind
类中的方法局部开启了严格模式，直接获取是undefined

 // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);

也可以使用箭头函数

 handleClick = () => {
    console.log('this is:', this);
  };

向事件处理程序传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

条件渲染
方法一：元素变量

let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

方法二： && 运算符

{unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }

方法三：三目运算符

return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );

阻止渲染：

if (!props.warn) {
    return null;
  }

受控组件
在 HTML 中，表单元素（如、和）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
对于受控组件来说，输入的值始终由 React 的 state 驱动

select 表单

<select>
  <option selected value="coconut">椰子</option>
  <option value="mango">芒果</option>
</select>

React 并不会使用 selected 属性选中，而是在根 select 标签上使用 value 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它。

 handleChange(event) {
    this.setState({value: event.target.value});
  }
<select value={this.state.value} onChange={this.handleChange}>
 <option value="grapefruit">葡萄柚</option>
 <option value="lime">酸橙</option>  
</select>
支持多选：
<select multiple={true} value={['B', 'C']}>

什么是状态提升
在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。
单向数据流，其中一个子组件如何改变props 的数据？
可以通过父组件传递一个函数，子组件调用这个函数

父组件： 
 handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }
<TemperatureInput
   scale="c"
   temperature={celsius}
   onTemperatureChange={this.handleCelsiusChange} />
子组件：
handleChange(e) {
    // Before: this.setState({temperature: e.target.value});
    this.props.onTemperatureChange(e.target.value);

包含关系
有些组件无法提前知晓它们子组件的具体内容。在 Sidebar（侧边栏）和 Dialog（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况。

我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中：

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

这使得别的组件可以通过 JSX 嵌套，将任意组件作为子组件传递给它们。

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

React.lazy
React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。
fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

对content的理解
Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，无需逐层传递 props

const MyContext = React.createContext(defaultValue);

创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。此默认值有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效。

<MyContext.Provider value={/* 某个值 */}>

挂载在 class 上的 contextType 属性可以赋值为由 React.createContext() 创建的 Context 对象。此属性可以让你使用 this.context 来获取最近 Context 上的值。

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* 基于这个值进行渲染工作 */
  }
}
或者
<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

如何在嵌套组件中更新 Context

 this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,
    };
    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    }; 
    传递的时候提供一个方法
 <ThemeContext.Provider value={this.state}>
        <Content />
 </ThemeContext.Provider>
 使用的时候调用
return (
    <ThemeContext.Consumer>
      {({theme, toggleTheme}) => (
        <button
          onClick={toggleTheme}
          style={{backgroundColor: theme.background}}>
          Toggle Theme
        </button>
      )}
    </ThemeContext.Consumer>
  );

错误边界
错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树。错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。
部分 UI 的 JavaScript 错误不会导致整个应用崩溃
错误边界无法捕获以下场景中产生的错误：
事件处理（如果你需要在事件处理器内部捕获错误，使用普通的 JavaScript try / catch 语句）
异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
服务端渲染
它自身抛出来的错误（并非它的子组件）

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

只有 class 组件才可以成为错误边界组件。大多数情况下, 你只需要声明一次错误边界组件, 并在整个应用中使用它。

refs转发
Ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递（换句话说，“转发”它）给子组件。外部就可通过ref.current 获取到子组件内部的元素；

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

第二个参数 ref 只在使用 React.forwardRef 定义组件时存在。常规函数和 class 组件不接收 ref 参数，且 props 中也不存在 ref。
当你开始在组件库中使用 forwardRef 时，你应当将其视为一个破坏性更改，并发布库的一个新的主版本（不推荐使用）

Fragments
render()的返回必须且只能有一个根节点，否则就会报错。React Fragment 是 React 中的一个特性，它允许你对一组子元素进行分组，而无需向 DOM 添加额外的节点，从而允许你从 React 组件中返回多个元素。

 render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
可以简写：
 return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>

高阶组件、性能优化、与第三方库协同
Portal
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

ReactDOM.createPortal(child, container)
第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。

render() {
  // React 并*没有*创建一个新的 div。它只是把子元素渲染到 `domNode` 中。
  // `domNode` 是一个可以在任何位置的有效 DOM 节点。
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框
Profiler
Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销。它需要两个 prop ：一个是 id(string)，一个是当组件树中的组件“提交”更新的时候被React调用的回调函数 onRender(function)。

ender(
  <App>
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
    <Main {...props} />
  </App>
);

尽管 Profiler 是一个轻量级组件，我们依然应该在需要时才去使用它。对一个应用来说，每添加一些都会给 CPU 和内存带来一些负担。

协调
无论什么时候，当根元素类型不同时，React 将会销毁原先的树并重写构建新的树。
当比较两个相同类型的 React DOM 元素时，React 检查它们的属性（attributes），保留相同的底层 DOM 节点，只更新反生改变的属性（attributes）。
React 支持一个 key 属性（attributes）。当子节点有了 key ，React 使用这个 key 去比较原来的树的子节点和之后树的子节点。

render prop
render prop 是一个用于告知组件需要渲染什么内容的函数 prop。

class Mouse extends React.Component {
  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>

        {/*
          使用 `render`prop 动态决定要渲染的内容，
          而不是给出一个 <Mouse> 渲染结果的静态表示
        */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>移动鼠标!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

严格模式
StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

StrictMode 目前有助于：

识别不安全的生命周期
关于使用过时字符串 ref API 的警告
关于使用废弃的 findDOMNode 方法的警告
检测意外的副作用
检测过时的 context API
确保可复用的状态

使用 PropTypes 进行类型检查

对于某些应用程序来说，你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来对整个应用程序做类型检查。但即使你不使用这些扩展，React 也内置了一些类型检查的功能。要在组件的 props 上进行类型检查，你只需配置特定的 propTypes 属性

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

react 顶层 API

React.Component：React.Component 是使用 ES6 classes 方式定义 React 组件的基类

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React.PureComponent：React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了 shouldComponentUpdate()，在某些情况下使用 React.PureComponent可提高性能。
如果对象中包含复杂的数据结构，则有可能因为无法检查深层的差别，产生错误的比对结果。仅在你的 props 和 state较为简单时使用

class CounterButton extends React.PureComponent {
 constructor(props) {
  super(props);
  this.state = {count: 1};
 }

React.memo：为高阶组件，用于检查props 是否有变更，props相同的情况下，React将跳过渲染组件的操作并直接复用最近一次渲染的结果，有利于提高组件的性能

React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 state 或 context 发生变化时，它仍会重新渲染。

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);

默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

isValidElement()：验证对象是否为 React 元素，返回值为 true 或 false

React.isValidElement(object)

React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。
React.createRef 创建一个能够通过 ref 属性附加到 React 元素的 ref。
React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。
React.lazy() 允许你定义一个动态加载的组件。这有助于缩减 bundle 的体积，并延迟加载在初次渲染时未用到的组件
React.Suspense 可以指定加载指示器（loading indicator），以防其组件树中的某些子组件尚未具备渲染条件。

// 该组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // 显示 <Spinner> 组件直至 OtherComponent 加载完成
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

react生命周期方法介绍

挂载--------当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
constructor()：在 React组件挂载之前，会调用它的构造函数
static getDerivedStateFromProps()：此方法适用于罕见的用例，即 state的值在任何时候都取决于 props。 render()：应该为纯函数，这意味着在不修改组件 state的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。
componentDidMount()：会在组件挂载后（插入 DOM
树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
废弃：UNSAFE_componentWillMount() 新增：static getDerivedStateFromProps()

什么情况写需要使用constructor ？
通常，在 React 中，构造函数仅用于以下两种情况：
通过给 this.state 赋值对象来初始化内部 state。
为事件处理函数绑定实例

更新-----当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
staticgetDerivedStateFromProps() shouldComponentUpdate()：根据shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。
render()
getSnapshotBeforeUpdate()：在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从
DOM 中捕获一些信息（例如，滚动位置）。
componentDidUpdate()：会在更新后会被立即调用。首次渲染不会执行此方法。
废弃：UNSAFE_componentWillUpdate() 、UNSAFE_componentWillReceiveProps()

卸载-------·当组件从 DOM 中移除时会调用如下方法：componentWillUnmount()
会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在
componentDidMount() 中创建的订阅等

错误处理----当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法： static
getDerivedStateFromError()：此生命周期会在后代组件抛出错误后被调用。
componentDidCatch()：此生命周期在后代组件抛出错误后被调用

setState()

setState() 将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式
setState() 视为请求而不是立即更新组件的命令，它会批量推迟更新，这是出于性能的考虑
此时获取到的state是上一次的，因为state是异步的，解决办法：
1.componentDidUpdate 中获取最新的
2.setState 的回调函数（setState(updater, callback)）第二个参数为可选的回调函数，它将在 setState 完成合并并重新渲染组件后执行。通常，我们建议使用 componentDidUpdate() 来代替此方式。

forceUpdate()

component.forceUpdate(callback)

默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。
通常你应该避免使用 forceUpdate()，尽量在 render() 中使用 this.props 和 this.state。

合成事件
它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。

HOOK简介
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。
没有计划从 React 中移除 class。Hook 不会影响你对 React 概念的理解。

为什么要引入HOOK
① class 组件在组件之间复用状态逻辑很难
在class组件中实现组件复用比如 render props 和高阶组件。但是这类方案需要重新组织你的组件结构，组件嵌套使你的代码难以理解。hook可以在不改变组件结构的情况下复用状态逻辑
② 复杂组件变得难以理解
class组件中往往有很多状态逻辑和副作用代码，每个生命周期常常包含一些不相关的逻辑。如此很容易产生 bug，并且导致逻辑不一致。
Hook 将组件中相互关联的部分拆分成更小的函数
③ 难以理解的 class
class 需要一定的学习成本，还不能忘记绑定事件处理器，这些代码非常冗余。class 也给目前的工具带来了一些问题。例如，class 不能很好的压缩，并且会使热重载出现不稳定的情况。Hook 使你在非 class 的情况下可以使用更多的 React 特性。

hook的使用规则
只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。

什么是副作用
数据获取，设置订阅以及手动更改 React 组件中的 DOM

useEffect 的使用

可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组
情况一：不传第二个参数（模拟 class 组件的 DidMount 和 DidUpdate ）
useEffect(() => {
/** 执行逻辑 */
})  
情况二：传递一个空数组（模拟 class 组件的 DidMount ）
useEffect(() => {
/** 执行逻辑 */
},[]) 
情况三：传递数组有依赖项（模拟 class 组件的 DidUpdate ）
useEffect(() => {
/** 执行逻辑 */
},[age,name])  
情况四：第一个参数可以返回一个回调函数（模拟 WillUnMount 组件销毁的时候 停止计时器 ）
const [time, setTime] = useState(0)

useEffect(() => {
    const InterVal = setInterval(() => {
        setTime(time + 1)
    },1000)
    return () => {
           clearInterval(InterVal )
       }
},[])

useState 使用注意事项
与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

const [state, setState] = useState({});
setState(prevState => {
  // 也可以使用 Object.assign
  return {...prevState, ...updatedValues};
});

useContext
接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。
useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>。

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

useCallback
把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新；返回一个 memoized 回调函数。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo
把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。返回一个 memoized 值。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo和useCallback的区别
useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调第二个参数为要依赖的数据

共同作用：
1.仅仅依赖数据发生变化, 才会重新计算结果，也就是起到缓存的作用。

两者区别：
1.useMemo 计算结果是 return 回来的值, 主要用于缓存计算结果的值，应用场景如：需要计算的状态
2.useCallback 计算结果是函数, 主要用于缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化整个组件都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。

useRef
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );

本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
请记住，当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。

我该如何使用 Hook 进行数据获取？

useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );

      setData(result.data);
    };

    fetchData();
  }, []); 只会在组件挂载时调用，如果依赖于其他参数，可以添加依赖项