React Hooks - freeCodeCamp.org

如何使用 React、React Hooks 和 Axios 进行 CRUD 操作

luojiyin — Fri, 05 May 2023 11:10:00 +0000

原文： How to Perform CRUD Operations using React, React Hooks, and Axios

如果你正在使用React，理解和实现API请求可能是相当困难的。

所以在这篇文章中，我们将通过使用React、React Hooks、React Router和Axios实现CRUD操作来学习这一切。

让我们深入了解一下。

如何安装Node和npm

首先，让我们在系统中安装Node。我们将主要用它来执行我们的JavaScript代码。

去官方网站下载Node，https://nodejs.org/en/。

你还需要node包管理器，如npm，它是内建在Node上的。你可以用它来为你的JavaScript应用程序安装包。幸运的是，Node自带npm，所以你不需要单独下载它。

一旦它们都完成了，打开你的终端或命令提示符，输入node -v。这将检查你有哪个版本的Node。

如何创建你的React应用

为了创建你的React应用，在终端输入 npx create-react-app <你的应用程序名称>，或者本例中的**npx create-react-app**react-crud**。

你会看到软件包正在被安装。

一旦软件包安装完毕，进入项目文件夹，输入npm start。

你会看到默认的React模板，像这样：

默认的 React Boilerplate 模板

我们的 App.js文件

如何为React安装Semantic UI包（库）

让我们在我们的项目中安装Semantic UI React软件包。Semantic UI是一个为React制作的UI库，它有预建的UI组件，比如表格、按钮和许多功能。

你可以使用下面的一个命令来安装它，这取决于你的包管理器。

yarn add semantic-ui-react semantic-ui-css

对于使用 Yarn 包管理器

npm install semantic-ui-react semantic-ui-css

对于使用 NPM 包管理器

同时，在你的应用程序的主入口文件中导入该库，也就是index.js。

import 'semantic-ui-css/semantic.min.css'

在你的index.js文件中粘贴上面一行内容。

如何构建你的CRUD应用

现在，让我们开始使用React构建我们的CRUD应用。

首先，我们要给我们的应用程序添加一个标题。

在我们的app.js文件中，添加一个标题，像这样：

import './App.css';

function App() {
  return (
    
      React Crud Operations
    
  );
}

export default App;

在我们的应用程序中添加一个标题

现在，让我们确保它居中。

给父级div一个classname，即main。在App.css文件中，我们将使用Flexbox来使标题居中。

import './App.css';

function App() {
  return (
    
      React Crud Operations
    
  );
}

export default App;

app.js文件，在父 div 中的 className 为main的css定义。

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

我们的 app.css 文件

现在我们的标题已经完全居中了。

为了让它看起来更好一些，我们需要使它加粗，并添加一些很酷的字体。要做到这一点，我们将在我们的标题周围使用标题标签，像这样：

import './App.css';

function App() {
  return (
    
      React Crud Operations
    
  );
}

export default App;

让我们从 Google Font导入一种字体. 从 https://fonts.google.com/选择一种。

选择任何你喜欢的字体，但我将使用Montserrat字体家族。

在App.css文件中导入你选择的字体，像这样：

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

现在，让我们改变标题的字体。


      React Crud Operations

给 h2一个 lassName 为 main-header，就像上面。

然后，在你的 App.css文件，添加font family：

.main-header{
  font-family: 'Montserrat', sans-serif;
}

现在你会看到改变后的标题。

如何创建你的CRUD组件

让我们创建四个CRUD组件，它们将是创建、读取、更新和删除。

在我们的src文件夹中，创建一个名为组件的文件夹。在这个文件夹中，创建三个文件--创建、读取和更新。对于删除，我们不需要任何额外的组件。

现在，让我们来实现这些。

但为此，我们需要使用Mock API。这些API将向我们将要创建的假服务器发送数据，这只是为了学习的目的。

所以，请前往 https://mockapi.io/ ，创建账号。

MockAPI

通过点击(plus)加号按钮创建一个项目。

点击(plus)加号按钮，创建一个新的项目。

添加你的项目名称，然后点击(create)创建按钮。

现在，通过点击 (NEW RESOURCE)新资源 按钮创建一个新资源。

它将要求你提供(RESOURCE name)资源名称，所以输入你想使用的名称。

删除额外的字段，如姓名(name)、头像(avatar)或创建时间(createdAt），因为我们将不需要这些。然后，点击创建(create)。

现在，我们已经创建了我们的 fake API(假API)，我把它命名为fakeData。

点击fakeData，你会看到API在一个新的标签中打开。现在的数据库是空的。

如何为(create Component)创建组件创建一个表格

让我们使用Semantic UI库中的一个表单。

前往Semantic React，在左边的搜索栏中搜索Form。

你会看到一个像这样的表格，点击左上方的 试试(Try it)，就可以得到代码。

复制这段代码并将其粘贴到你的Create.js文件中，像这样：

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    
        
            First Name
            
        
        
            Last Name
            
        
        
            
        
        
    
)

export default Create;

在你的app.js文件中导入创建组件(Create Component)。

import './App.css';
import Create from './components/create';

function App() {
  return (
    
      React Crud Operations
      
        
      
    
  );
}

export default App;

就像这样：

但这里有一个问题--项目没有正确对齐，文本输入标签颜色是黑色的。所以，让我们来改变它。

在create.js文件中，给Form一个create-form的className。

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    
        
            First Name
            
        
        
            Last Name
            
        
        
            
        
        
    
)

export default Create;

app.js

并在你的App.css文件中添加以下类。

.create-form label{
  color: whitesmoke !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px !important;
}

App.css

这个类将针对所有的表格字段标签并应用白烟的颜色。它还将改变字体并增加字体大小。

现在，在我们的主className中，添加一个flex-direction属性。这个属性将设置方向为列，所以主className中的每个元素都将水平对齐。

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #212121;
  color: whitesmoke;
  flex-direction: column;
}

App.css

你可以看到，我们的表单现在看起来好多了。

接下来，让我们从表单字段中获取数据到我们的控制台(console)。为此，我们将使用React的useState钩子。

在我们的create.js文件中，从React中导入useState。

import React, { useState } from 'react';

然后，为名字(first name)、姓氏(last name)和复选框(checkbox)创建状态。我们将这些状态初始化为空或假。

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    return (
        
            
                
                    First Name
                    
                
                
                    Last Name
                    
                
                
                    
                
                
            
        
    )
}

你可以看到，这现在是作为一个函数组件。所以，我们需要把这个组件改成一个函数组件。这是因为我们只能在函数组件中使用钩子。

现在，让我们分别使用setFirstName、setLastName和setCheckbox属性来设置名字、姓氏和复选框。

 setFirstName(e.target.value)}/>

 setLastName(e.target.value)}/>

 setCheckbox(!checkbox)}/>

我们正在获得名字(first name)、姓氏(last name)和复选框(checkout)的状态。

创建一个名为postData的函数，我们将用它来向API发送数据。在该函数中，写下这段代码。

const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
}

我们在控制台中打印出名字(firstName)、姓氏(lastName)和复选框(checkbox)的值。

在(Submit button)提交按钮上，使用onClick事件调用这个函数，这样，每当我们按下提交按钮，这个函数就会被调用。

这里是 create 文件的全部代码。

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
    }
    return (
        
            
                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>
                
                
            
        
    )
}

在名字和姓氏中输入一些数值，并勾选复选框。然后，点击提交按钮。你会看到控制台中打印出的数据是这样的。

如何使用Axios向Mock APIs发送请求

让我们使用Axios来发送我们的表单数据到模拟服务器。

但首先，我们需要安装它。

只要输入npm i axios来安装这个包。

软件包安装完毕后，让我们开始(create)创建操作。

在文件的顶部导入Axios。

import axios from 'axios';

导入Axios

在postData函数中，我们将使用Axios来发送POST请求。

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        })
    }

发送 Post 请求

如你所见，我们正在使用axios.post。在axios.post中, 我们有 API endpoint(接入点请求地址), 这是我们之前创建的。然后，我们有被大括号包裹的表单字段。

当我们点击提交时，这个函数将被调用，它将向API服务器发布数据。

输入你的名字(first name)，姓氏(last name)，并勾选复选框。点击提交。

然后，你检查这个API的返回值，你会得到你的名字、姓氏，复选框为真的值，被包裹在一个对象中。

如何实现读取和更新操作

为了开始(read)读取操作，我们需要创建一个读取页面。我们还需要React Router包来导航到不同的页面。

前往https://reactrouter.com/web/guides/quick-start查看文档，同时运行 npm i react-router-dom进行安装。

安装完毕后，从React Router导入一些东西：

import { BrowserRouter as Router, Route } from 'react-router-dom'

从React Router中导入Router和Route。

在我们的App.js中，把整个返回包成一个Router。这基本上意味着，无论这个Router里面有什么，都能在React中使用。

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    
      
        React Crud Operations
        
          
        
      
    
  );
}

export default App;

我们的App.js现在看起来会像上面的样子。

替换掉返回里面的Create，并添加以下代码。

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    
      
        React Crud Operations
        
          
        
      
    
  );
}

export default App;

在这里，我们使用Route组件作为Create。我们已经将Create的路径设置为'/create'。因此，如果我们进入http://localhost:3000/create ，我们将看到创建页面。

同样地，我们需要(read)读取和(update)更新的路由。

import './App.css';
import Create from './components/create';
import Read from './components/read';
import Update from './components/update';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    
      
        React Crud Operations
        
          
        
        
          
        

        
      
    
  );
}

export default App;

因此，(read)读取和(update)更新路由，类似你上面看到的。

如果你前往 http://localhost:3000/read，会看到下面的：

Read Route

在http://localhost:3000/update 网址，我们可以看到更新组件（Update Component），像这样：

读取操作

对于读取操作，我们将需要一个表组件。因此，前往React Semantic UI，并使用库中的一个表。

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        
            
                    
                        Name
                        Registration Date
                        E-mail address
                        Premium Plan
                    
                
                    
                        John Lilki
                        September 14, 2013
                        jhlilk22@yahoo.com
                        No
                    
                    
                        Jamie Harington
                        January 11, 2014
                        jamieharingonton@yahoo.com
                        Yes
                    
                    
                        Jill Lewis
                        May 11, 2014
                        jilsewris22@yahoo.com
                        Yes
                    
                
                

                
            
        
    )
}

Read.js

在这里，你可以看到我们有一个带有一些假数据(dummy data)的表。但我们只需要一个表行。所以，让我们删除其他的。

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        
            
                    
                        Name
                        Registration Date
                        E-mail address
                        Premium Plan
                    
                
                    
                        John Lilki
                        September 14, 2013
                        jhlilk22@yahoo.com
                        No
                    
                
                

                
            
        
    )
}

Read.js

这是“阅读”页面的输出。我们有一个有四列的表，但我们只需要三列。

删除多余的字段列，并像这样重新命名字段。

这就是我们的阅读页面现在的样子：

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        
            
                    
                        First Name
                        Last Name
                        Checked
                    
                
                    
                        Nishant
                        Kumar
                        Yes
                    
                
                

                
            
        
    )
}

Read.js

现在，让我们发送GET请求，从API获得数据。

当我们的应用程序加载时，我们需要这些数据。所以，我们要使用useEffect钩子(hook)。

import React, { useEffect } from 'react';

 useEffect(() => {
       
 }, [])

useEffect钩子(hook)

创建一个包含传入数据的状态。这将是一个数组。

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

const [APIData, setAPIData] = useState([]);
useEffect(() => {
       
}, [])

APIData state 来存储API传入的数据

在useEffect钩子(hook)中，让我们发送GET请求。

 useEffect(() => {
        axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])

因此，我们使用axios.get来向API发送GET请求。然后，如果请求被满足，我们就在我们的_APIData_状态中设置响应数据。

现在，让我们根据API数据来映射我们的表行。

我们将使用Map函数来做这件事。它将对数组进行迭代，并在输出中显示数据。


  {APIData.map((data) => {
     return (
       
          {data.firstName}
           {data.lastName}
           {data.checkbox ? 'Checked' : 'Unchecked'}
        
   )})}

我们根据API中的数据来映射firstName、lastName和checkbox。但我们的复选框有一点不同。我在这里使用了一个三元操作符（'?'）。如果data.checkbox为真，输出将是Checked，否则将是Unchecked。

Read.js 输出

更新(Update)操作

再为更新创建一个标题，并在表行中为更新按钮创建一列。使用Semantic UI React的按钮。

Update

创建(Update)更新按钮

现在，当我们点击这个按钮，我们应该被重定向到更新页面。为此，我们需要React Router的链接。

从React Router导入Link。并将更新按钮的表格单元格包装成Link标签。

import { Link } from 'react-router-dom';

为更新按钮添加链接(Link)

因此，如果我们点击更新按钮，我们将被重定向到更新页面。

为了更新列的数据，我们需要它们各自的ID，这从APIs获得。

创建一个名为 "setData "的函数。将其绑定到更新按钮上。

现在，我们需要将数据作为参数传递给上面的函数。

并在上面的的函数中，在控制台中打印这些数据。

const setData = (data) => {
   console.log(data);
}

控制台的数据

点击表中的更新按钮，并查看控制台。你会得到相应表字段的数据。

让我们把这些数据设置到localStorage中。

const setData = (data) => {
        let { id, firstName, lastName, checkbox } = data;
        localStorage.setItem('ID', id);
        localStorage.setItem('First Name', firstName);
        localStorage.setItem('Last Name', lastName);
        localStorage.setItem('Checkbox Value', checkbox)
}

在本地存储中(Local Storage)设置数据

我们正在将我们的数据解构为id、firstName、lastName和checkbox，然后我们将这些数据设置到本地存储(Local Storage)。你可以使用本地存储(Local Storage)来在浏览器中的存储数据。

现在，在更新组件中，我们需要一个表单来进行更新操作。让我们复制(reate component)创建组件中的表单。只要把函数的名称从Create改为Update。

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';

export default function Update() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    return (
        
            
                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>
                
                
            
        
    )
}

我们的更新页面

在Update组件中创建一个`useEffect'钩子(hook)。我们将用它来获取我们之前存储在本地存储的数据。同时，为ID字段再创建一个状态(state)。

const [id, setID] = useState(null);

useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'))
}, []);

根据你的keys(字典，map 数据结构)从本地存储设置相应的数据。我们需要在表格字段中设置这些值。当更新页面加载时，它将自动填入这些字段。


                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>

设置表格字段的值

现在，如果我们点击阅读页面中的更新按钮，我们将被重定向到更新页面，在那里我们将看到所有根据数据自动填充的表单。

更新页面

现在，让我们创建更新请求来更新数据。

创建一个名为updateAPIData的函数。在这个函数中，我们将使用axios.put来发送一个PUT请求，以更新我们的数据。

const updateAPIData = () => {
    axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
        firstName,
         lastName,
         checkbox
	})
}

在这里，你可以看到我们在API端点上附加了一个id字段。

当我们点击表中的字段时，它的ID会被存储到本地存储器(Local Storage)中。而在更新页面，我们正在检索它。然后，我们将该ID存储在_id_状态中。

之后，我们将ID传递给端点。这使我们能够更新我们传递ID的字段。

将updateAPIData函数绑定到更新按钮上。

将updateAPIData绑定到更新按钮上

点击读取页面中表格的更新按钮，改变你的姓氏（last name），然后点击更新页面中的更新按钮。

更新字段

回到“阅读”页面，或查看API。你会看到你的姓氏(last name)已被改变。

The Mock API

我们的读取表格

删除操作

在读取表(read table)中再添加一个Button，我们将用它来进行删除操作。

读取表中的删除按钮

创建一个名为 "onDelete "的函数，并将此函数绑定到删除按钮上。这个函数将在点击删除按钮时接收一个ID参数。

const onDelete = (id) => {

}

The Delete Function

We are going to use axios.delete to delete the respective columns.

const onDelete = (id) => {
  axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
}

从API中删除字段

点击删除按钮并检查API。你会看到数据已经被删除。

我们需要在表被删除后获得该表的数据。

因此，创建一个函数来获得API数据。

const getData = () => {
    axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
        .then((getData) => {
             setAPIData(getData.data);
         })
}

获取API数据

现在，在onDelete函数中，我们需要在删除一个字段后获得更新的数据。

const onDelete = (id) => {
        axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
     .then(() => {
        getData();
    })
}

删除一个字段后获得更新数据

读取表格

因此，现在如果我们在任何字段上点击Delete，它将删除该字段并自动刷新表格。

删除一个字段后读表

让我们对我们的CRUD应用程序做一些改进吧

因此，当我们在Create页面发布我们的数据时，我们只是在模拟(mock)数据库中获得数据。当我们的数据在创建页面中被创建时，我们需要重定向到读取页面。

从React Router导入`useHistory'。

import { useHistory } from 'react-router';

从React Router导入useHistory

创建变量history使用 let。

let history = useHistory();

然后，使用history.push函数，在post API被调用后推送到阅读页面。

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }

在发布API成功后推送到阅读页面

它将使用useHistory钩子(hook)推送到阅读页面。

对更新页面做同样的处理。

import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useHistory } from 'react-router';

export default function Update() {
    let history = useHistory();
    const [id, setID] = useState(null);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'));
    }, []);

    const updateAPIData = () => {
        axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }
    return (
        
            
                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>
                
                
            
        
    )
}

Update.js

现在你知道如何使用React和React Hooks进行CRUD操作了吧！

另外，如果你想补充学习，你可以观看我在Youtube上的[React CRUD操作视频]（https://youtu.be/-ZMP8ZladIQ）。

学习愉快

React Hooks 入门教程——10 分钟学会使用 useState Hook

Keren Ma — Fri, 02 Dec 2022 08:22:00 +0000

原文： React Hooks for Beginners – Learn to Use the useState Hook in 10 Minutes

大家好🌈我很久没有写关于在React中处理状态的文章了。上一次写这个主题，是四年前在这篇文章中，它似乎帮助了很多人。

我收到了大量的观看和惊人的反馈，所以非常感谢——你们真的很棒！🎸

从那以后已经过去很久了。hook从v16.8版本（2019年）开始在React中出现，在React中使用state时有很多需要跟上的地方。

你正在学习state并想通过useState hook成为专业人员吗？

太好了，你来对地方了！拿上一杯咖啡（或茶），系好安全带，我们出发吧！

顺便说一下——如果你正在寻找如何使用setState（在类组件中），那么我建议你查看我以前的文章，“如何在10分钟内成为使用React setState()的专家”。

什么是React Hook？

hook（钩子）是一种特殊的函数，它允许你“钩入”各种React特性。假设一个函数返回一个有两个值的数组：

第一个值: 一个带有状态state的变量。
第二个值: 一个带有处理程序handle（改变当前状态的函数）的变量。

就是这样，很简单。🥞

记住，在JavaScript中，"值是函数，函数是值"。我是在2017年从 MPJ学到这一点的，MPJ是我最喜欢的开发者和youtuber之一。谢谢MPJ所做的一切！

如果这让你有点困惑，这里有一个例子：

值就是函数，函数就是值

让我们看看这里发生了什么：

在a中，存储一个数字。我的意思是，将值1（这是一个数字）赋给一个名为a的变量。
在b中，存储计算表达式的结果（值）。
在c中存储一个函数。你存储了一个未执行的函数，它被存储为一个值，随时可以执行。
在d中，我们将c的计算结果赋值。

你明白我的意思了吗？是的，函数就是值，值就是函数！这就是你现在需要知道的。

useState，特别地，它允许你向函数组件（声明为函数而不是类的组件）添加React状态。

实际上，状态保存在钩子内部，但是可以从“调用”钩子的组件访问。

React Hooks的规则

除了hook是JavaScript函数这一事实之外，在使用它们时还需要遵循一些规则：

只在顶层调用钩子

不要在循环、条件或嵌套函数中调用钩子。总是在React函数（组件）的顶层使用钩子，在任何早期返回之前。

这背后的原因是，每次组件渲染时，必须以相同的顺序调用钩子。这使得React能够正确地保存多个useState和useEffect调用之间的钩子状态。

只有React函数的调用钩子

这意味着你可以从React函数（组件）或自定义钩子调用钩子，但不能从常规JavaScript函数调用。

这里有一个有用的插件here，它强制执行钩子的规则。这是一个非常有用的方法，所以一定要尝试一下。

useState hook的结构

要使用useState钩子，你需要知道一些事情。

💡你可以查看下面的图来更好地理解我将在这里解释的内容。

1.你必须从React库导入它
2.你必须在React组件中调用它

const [state, setState] = useState(initialValue)

不确定你是否理解了它的解构，所以对于那些第一眼没看出来的人：

我尝试这样做：

const array = useState(initialValue)

然后我可以使用状态，在位置0内，作为数组[0]，用处理函数setState，在位置1内，作为数组[1]。

解构数组的声明性更强，因为我们知道它的第一个和第二个位置值，我们知道它们对应于状态值和用于更改它的处理程序。

const [first, second] = useState(initialValue)

是的，我们做到了。但我们可以把任何东西称为first和second。唯一的规则是这些变量对应于useState函数（hook）返回的数组的第一个和第二个位置。

const [state, setState] = useState(initialValue)
const [counter, setCounter] = useState(initialCount)
const [something, setSomething] = useState(initialSomething)

如果你不熟悉解构赋值语法，可以暂停阅读，了解一下MDN 或阅读本教程。

去吧——我会等的！（Edo 喝了一小口 ☕）

3. 然后可以自由渲染状态，或者调用setState来更新状态值。

这是一个最简单的函数示例：

useState hook的结构

何时使用 useState Hook

为了理解何时使用这个钩子hook，我们需要从学习何时需要状态state开始。

乍一看，我们认为当我们需要一个随时间变化的变量时，我们需要保持它in state。但在大多数情况下，事实并非如此。我的意思是，如果你的变量可以从其他数据推导出来，那么你就不需要状态了。

State 案例 1

主题颜色, 根据时间变暗或变亮的，可以从系统数据中推导出来。

我们可以简单地从JS的date函数中获得时间（日期）。所以我们在这里不需要状态，对吧?这是一个可以用表达式或函数声明的常量const。

State 案例 2

一个模式开关（显示/隐藏模式）。

模式切换可以为true或false，当用户单击按钮时触发。因此，在这种情况下，我们真的需要状态，因为我们不能推导这类信息-它只取决于“何时和是否”用户触发事件。

要注意这个区别——什么可以派生推导，什么取决于用户。

当需要存储来自用户的输入时，你将需要使用useState钩子。

💡作为经验法则，你应该只使用状态state来保存这类信息——需要用户输入数据或触发事件。

另一个常用的例子是表单数据。几乎每个应用程序或网站都需要从用户那里收集信息。要做到这一点，通常（或强制）需要有一个表格。

表单数据必须以状态存储，至少在将其持久化到数据库之前是这样。但它也可以从数据库中检索，并使其再次可编辑。

很好，我们继续。

如何在React中使用多个状态变量

如果我们需要处理多个状态，最好和推荐的第一种方法是分别处理它们，像这样：

猫狗计数器（处理多个状态变量）

这样做并没有什么错，尽管它看起来很原始。当我们继续使用JavaScript基本类型（在本例中是数字）时，这是一种很好的线性方法。

你也可以在一个对象中混合状态：

这个例子变得有点复杂。我们已经初始化了一个对象，而不是一个基本类型。当我们调用setPets时，我们必须意识到我们需要展开现有的pets对象，然后添加更改，否则我们将丢失它。

对于旧的setState API，这不是强制性的 – 它会理解你想要更新state object的key。但现在它不是了，我喜欢它。现在它更具声明性，是JavaScript中的基本概念。

如果你不熟悉spread语法，请查看MDN或阅读这个有用的教程。

异步状态

注意，改变/突变状态是一个异步操作。

让我们来看一个证据：

状态是异步的（它是有延迟的批处理和更新）

所以，我更新了我们最初的狗的例子。这次我创建了一个handleDogsCount函数来向你显示它。

在handleDogsCount内部，我用新值调用setDogs。

如果我需要立即为另一个操作使用状态值，会发生什么？

对，状态还没更新。实现即时操作的最佳方法是使用传递给handleDogsCount函数的值，并且——暂时忘记狗的状态值——事先知道该值没有及时更新（这很棘手，但事实就是如此）。

如何以函数的方式突变状态

好了，现在我们知道状态不会立即改变。还有一个相关的问题。如果你可以每秒点击More按钮1M次，会发生什么？

可能，在点击1M的最后，计数器将是999_998（或更少），而不是预期的1_000_000。

为了避免这种情况发生，我们可以用函数的方式设置状态。我们将获取前一个状态的值，以便React能够正确地批处理所有请求并线性更新状态。这样我们就不会在中间丢失信息。

要做到这一点，你可以简单地做以下几点：

以函数的方式改变状态

好的，很酷。现在我们确信React在处理我们的1M请求以改变状态时不会错过任何东西。

我们不是抓取dogs变量来添加或减去1，而是依赖于暴露在useState setState handle内部的previousState（在本例中是setDogs函数）。

注意，对象和数组是通过引用进行比较的，因此复杂的状态应该在其他钩子（如useEffect）的依赖项数组中得到适当的控制。我们将在后面的另一篇文章中讨论它！

如果你是JavaScript新手，让我给你一个关于我所说的内容的剧透：

引用类型比较

正如你所看到的，c并不严格等于d。是的，去试试吧！JavaScript比较复杂对象（所有非基本类型）的方法是引用，而不是值。

如果我将它字符串化，就意味着我在比较字符串。因为它们都是基本类型，所以它们严格相等（按值比较）。

如何将状态初始化为函数

如果需要使用庞大的计算量来初始化状态，那么最好使用函数而不是值来初始化它。（译者注：expensiveComputation() 最小化局部变量作用域，保持方法小而集中。）

const [ dogs, setDogs] = useState(() => expensiveComputation())

这意味着我们在延迟初始化变量。初始值只会在初始渲染时赋值（如果是函数的话）。

在随后的渲染中（由于组件或父组件的状态更改），useState钩子的参数将被忽略，并将检索当前值。

总结

你已经了解了什么是钩子、钩子的规则、useState如何工作、它的结构以及如何处理多个状态。

你还了解了一些陷阱（比如处理状态对象，或者该状态是异步的），以及一些改进性能的技巧，比如将状态初始化为函数，以避免不断地计算该计算。

希望你喜欢这篇关于useState钩子或简单的“state hook”的文章。

最后但同样重要的

我是 Edo，我是freeCodeCamp的倡导者，喜欢帮助人们转行从事软件工程。

如果你正在转行，或者正在考虑转行，在freeCodeCamp专栏读一点我的故事，可能会激励你。

你可能也会对“如何在6个月内成为一名初级软件工程师”感兴趣。

如果你喜欢这篇文章，请在Twitter 上关注我，联系我，这样我们就可以聊天了！

谢谢大家。🌈

Edo

React Hooks 初学者指南

luojiyin — Fri, 11 Mar 2022 10:00:00 +0000

原文：Learn React Hooks – A Beginner's Guide，作者：Victor Ikechukwu

函数组件（Functional components）并不总是 React 中声明组件的首选方法。

在 React 16.8 版本推出之前，函数组件被视为二等公民。它们不能处理状态（state）、逻辑（logic）和许多其他的 React 特性，而且我们只用它们来向 UI 渲染非常简单的组件。

React 16.8 版通过引入 React Hooks 解决了这些问题，它让开发者在函数组件（Functional components）中使用这些 React 特性。

在这篇文章中，你将学习：

什么是 React Hooks
四个常见的 React Hooks，并举例说明如何在你的应用程序中编写它们
最后，我们将看看如何编写你自己的自定义 React Hooks

什么是 React Hooks

Hooks 是 React 16.8 版本中引入的内置 React 函数。它们允许你在函数组件（Functional components）中使用 React 库的功能，如生命周期方法（lifecycle methods）、状态（state）和上下文（context ），而不必担心将其重写为一个类（class）。

每个 React Hook 名称的前缀是 "use" 一词。例如，useState或useEffect。选择这种格式是因为 Hooks 让开发者使用 React 库的特殊功能。所以你是在use React 库的那个特殊功能。

为什么使用 React Hooks

许多开发者对学习 React Hooks 持怀疑态度，但你不应该这样。以下是你应该开始使用 React Hooks 的几个原因：

React 中的类可能是相当混乱的

类是正确学习 React 的一个障碍。为了使用它们，你需要了解this关键字是如何工作的。你还需要不断记住绑定事件处理程序，以及在 React 中使用类时遇到的其他多余的方法。

类组件（Classes components）部分很复杂，可能难以理解

类组件通常很大，并试图进行许多操作。从长远来看，它们变得难以理解。

Hooks 解决了这个问题，它允许你把大的组件分离成各种小的功能，而不是把所有的逻辑都强加到一个单一的组件中。

Hooks 的组件更短，可读性更好

类组件带有大量的模板代码。考虑一下下面的计数器组件：

class Counter extends Component {
    constructor(props) {
        super(props)
        this.state = {
         count: 1,
        }
    }
    render() {
        return (
            
                The Current Count: {this.state.count}
                
                
                
                
            
    );
    }
}

下面是使用函数组件（functional component）和 React Hooks 的等效代码：

function Counter  ()  {
    const [count, setCount] = useState(1);
    return (
        
            The Current Count: {this.state.count}
            
                
                
            
        
    );
};

请注意，类组件要复杂得多。你需要一个类来扩展 React，一个构造函数来初始化状态，而且你需要到处引用this 关键字。

使用函数组件（functional components）可以消除很多这些，所以我们的代码变得更短，更容易阅读和维护。

使用 React Hooks 的规则

在使用 React Hooks 时，有几个规则需要遵守：

只在组件的顶层调用 Hooks：你不应该在循环、条件或嵌套函数中使用 Hooks。相反，总是在你的 React 函数的顶层使用 Hooks，在任何 return 关键字之前。
只从React函数中调用Hooks：不要从普通的 JavaScript 函数中调用 Hooks。你可以：
✅ 从 React 函数组件（functional components）中调用 Hooks
✅ 从自定义 Hooks 中调用 Hooks

最常见的 React Hooks

到目前为止，React 有 10 个内置 Hooks。让我们看看四个最常见的 Hooks：

useState
useEffect
useContext
useReducer

useState Hook

useState Hook 允许你在函数组件（functional components）内创建、更新和操作状态。

React 有一个状态的概念，它是持有我们的组件所依赖的数据的变量，并可能随着时间的推移而改变。每当这些变量发生变化时，React 就会用状态变量的当前值重新渲染 DOM 中的组件来更新 UI。

这个钩子需要一个可选的参数，一个状态（state）的初始值。然后它返回一个包含两个值的数组：

state 变量
一个用于更新状态的函数

让我们以一个计数器组件为例来看看：

要使用一个 Hook，第一步是在文件的顶部导入 Hook：

import { useState } from "react";

然后，用一个值初始化 Hook。由于它返回一个数组，你可以使用数组解构来访问数组中的各个项目，就像这样：

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

有了这个，该组件的代码将是：

import { useState } from "react";

function Counter() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
    return (
        
        Current Cart Count: {count}
            
            
            
            
        
    );
}

下面是该组件渲染后的样子。

通过点击 Add to cart 或 Remove from cart 按钮，状态变量计数的值将发生变化，组件将以更新的状态值重新呈现。

useEffect Hook

如果你熟悉 React 类的生命周期方法（lifecycle methods），你可以把 useEffectHook 看作是componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法在一个函数中的结合。它让你在函数组件（functional components）中复制 React 的生命周期方法。

useEffect Hook 让你在函数组件（functional components）中执行副作用（side effects）。副作用是可以与组件的主要操作一起运行的动作，如外部 API 交互、修改 state 变量（state variables）和数据获取。

useEffect hook 接收两个参数：

一个包含要运行的代码的函数
一个包含组件范围（props、context 和 state variables）数值列表的数组，被称为依赖数组，它告诉 Hook 在每次更新其数值时都要运行。如果不提供，Hook 将在每次渲染后运行。

下面是一个使用 Hook 的例子：

import { useState, useEffect } from "react";
function Counter() {
    // Declare state variables
    const [count, setCount] = useState(0);
    const [product, setProduct] = useState("Eggs");
    useEffect(() => {
     console.log(`${product} will rule the world!`);
    });
    return (
        
        Current {product}'s count: {count}
            
                
                
                Change Product:{" "}
                 setProduct(e.target.value)} />
            
        
    );
}

在这个例子中，该效果将在每次状态更新后运行。

如何有条件地启动一个 Effect

要想在某些值发生变化时才运行 Hook，可以将变量作为依赖关系传入数组：

useEffect(() => {
 console.log(`${product} will rule the world!`);
}, [product]); // Only re-run the effect if the value of product changes

有了这个变化，Hook 将只在第一次渲染时运行，并且当产品的价格发生变化时。

如何在第一次渲染时运行一次

如果你想让一个 Effect 在第一次渲染时只运行一次，比如在组件第一次渲染时进行 API 调用，你可以像这样传递一个空数组作为其依赖。

useEffect(() => {
 console.log("This runs once on first render");
}, []);

通过提供一个空数组，它告诉 Hook 听从零状态变化（zero state changes），所以它只运行一次。

useContext Hook

useContext Hook 与 React Context API 一起工作。它为你提供了一种方法，使整个应用程序中的所有组件都能访问特定的数据，无论它们的嵌套有多深。

React 有一个单向的数据流，数据只能从父代传递到子代。要把数据（如 state）从父组件传给子组件，你需要根据子组件的嵌套深度，把它作为一个 prop，通过不同的级别向下传递。

对于诸如用户的首选语言、主题或认证用户的属性等数据，必须手动地在组件树上传递它们是很乏味的。

React的Context API和 useContext Hook 使得在应用程序的所有组件中传递数据变得容易。

它接受一个用React.createContext创建的上下文对象，并像这样返回当前的上下文:

const value = useContext(SomeContext);

让我们来看看 Hook 是如何工作的一个例子：

首先，创建一个使用 Hook 的上下文（context）。例如，这里有一个 UserContext 来获取当前用户的值：

import React from "react";
// some mock context values
const users = [
{
    name: "Harry Potter",
    occupation: "Wizard",
},
{
    name: "Kent Clark",
    occupation: "Super hero",
},
];

export const UserContext = React.createContext(users);

每个上下文（context）都有一个包装器提供者（Provider wrapper），它允许其子组件订阅上下文（context）的变化，并通过一个值 prop 传递上下文的值。

如果提供者的值 prop（value prop）被更新，其子组件将以新的上下文值重新渲染。

function Users() {
return (
    
    
    
);
}

在这个例子中，UserProfile 被作为上下文的接收组件（ consuming component）。

import React, { useContext } from "react";
import { UserContext } from "./App";

export function UserProfile() {
    const users = useContext(UserContext);
    return (
        
            {users.map((user) => (
            
            I am {user.name} and I am a {user.occupation}!
            
            ))}
        
    );
}

这将显示当前用户的属性：

useReducer Hook

useReducer Hooks 是 useState Hooks 的一个替代品。不同的是，它允许更复杂的逻辑和涉及多个子值的状态更新。

与useState'类似，useReducer'允许你创建类似状态（state-like）的变量，每当它们发生变化时，都会导致用户界面的更新。

这个 Hook 接受 2 个参数：一个 reducer 函数和一个初始状态（initial state）。

useReducer(reducer, initialState);

它返回一个由两个值组成的数组，这两个值可以被解构为状态的当前值和一个调用函数。

const [state, dispatch] = useReducer(reducer, initialState);

让我们了解一下它的参数和返回值：

state：这是传递给 Hook 的 initialState 的当前值。
reducer：reducer 是一个接受状态和动作的函数。基于这些参数，它决定了状态的值将如何变化。
dispatch：调用函数是我们将动作传递给 reducer 函数，它分配动作以用于更新状态。

通常情况下，我们通过 switch 语句遍历我们在应用程序中的动作类型，以确定状态值将如何变化。这就是 Hook 更新其状态值的方式。

function reducer(state, action) {
    switch (action.type) {
        case "CASE_1":
        return {
         updatedState,
        };
        case "CASE_2":
        return {
         updatedState,
        };
        default:
         return state;
    }
}

dispatch function 通常以下列格式派发一个对象：

dispatch({ type: "ACTION_TYPE", payload: optionalArguments });

其中 type 是动作的描述，payload 是你要传递给 reducer 的参数。

如何创建自定义 Hooks

自定义 Hook 的概念是通过利用已有的 React Hook，将常用的组件逻辑从 UI 中提取到 JavaScript 函数中。这可以帮助你防止代码重复，并让你在多个组件中使这些逻辑可以重复使用。

让我们看看一个自定义 Hook 的例子，它将从我们传递给它的任何有效的 API URL 返回一个响应。

//useFetch.js
import { useState, useEffect } from "react";

export function useFetch(url) {
 //values
    const [data, setData] = useState(null);
    const [error, setError] = useState("");
    useEffect(() => {
        fetch(url)
        .then(res => {
            if (!res.ok) {
            throw Error("something wrong, çould not connect to resource");
        }
        setData(res.json());
        })
        .then(() => {
         setError("");
        })
        .catch( error => {
            console.warn(`sorry an error occurred, due to ${error.message} `);
            setData(null);
            setError(error.message);
        });
    }, [url]);
    return [data, error];
}

现在，你可以在你的应用程序中的任何地方使用这种逻辑，只需导入该函数并将 API 路径作为参数传递，而不是从头开始编写。

结语

我希望你能看到 React Hooks 是多么有用。它们可以让你快速创建有效的组件，而不用担心类组件所带来的麻烦。

从让你专注于写你的主要代码到允许你创建你自己的自定义 Hooks......React Hooks 是如此的酷！我很高兴你能自己尝试它们。

如果你觉得这篇文章有帮助，请与你的朋友分享它。另外，欢迎在 Twitter 和我的博客上与我联系，我在那里分享了大量的免费教育文章和资源。

谢谢你阅读本文，并祝你编程愉快！

使用 React Hooks 创建可复用的动画组件

Leo Zou — Thu, 31 Oct 2019 14:31:50 +0000

动画总是会取悦用户。看到各种文章的介绍，你可能会觉得开发者们喜欢使用 React Hooks ，但我发现自己开始慢慢对 Hooks 产生厌倦了。

某个意外的发现让我对 React Hooks 有了新的认识，它不仅仅是一种新的开发方式。也许你已经从文章标题猜到是什么了，没错，就是动画！

我正在开发一个基于 React 的，使用网格布局组合卡片组件的应用，当删除某个卡片组件时，为它添加动画效果，看起来像下面一样：

但是，和图中效果相比较始终还是有点细微差别。在我的接下来的解决方案中，很好地利用了 React Hooks。

我们将要做什么？

开始构建一个基本的项目骨架
为元素的消失添加动画效果，解决一些小问题
最终效果实现后，将其重构为一个可复用的动画组件
在顶部导航和侧边导航中使用该动画组件

如果你没耐心，这里有整个项目的仓库地址，每一步都有相应的标记（链接地址和描述参考 README 文件）。

骨架

我使用 create-react-app 创建了一个简单的应用程序，它是一个简单的卡片网格结构，每个单独卡片可以被隐藏。

实现代码很简单，效果也很无趣。当用户点击眼睛图标时，我们改变卡片的 display 属性。

function Box({ word }) {
  const color = colors[Math.floor(Math.random() * 9)];
  const [visible, setVisible] = useState(true);
  function hideMe() {
    setVisible(false);
  }
  let style = { borderColor: color, backgroundColor: color };
  if (!visible) style.display = "none";
  return (
    
      {" "}
      {word}{" "}
      {" "}
    

  );
}

（上面的代码中使用到了 React Hooks，但这不是 Hooks 最有趣的用途）

添加动画

我没有构建自己的动画库，而是使用了一个像 animate.css 这样的动画库。react-animated-css 是一个很好的库，它为 animate.css 提供了一个包装器。

安装 react-animated-css

npm install --save react-animated-css

在 index.html 中添加 animate.css

在上面的 Box 组件中，将渲染结果改为

return (
  
    
      {word}
      
    

  
);

不完全是我们想要的东西

animate.css 会为 opacity 和其他 css 属性添加动画；但不能在 display 属性上添加 css 过渡效果，所以将卡片隐藏后，它始终在文档流中占据着位置。

如果你搜索一下，有些解决方案是建议使用定时器在动画结束时设置 display: none。

所以我们可以添加以下代码。

function Box({ word }) {
  const color = colors[Math.floor(Math.random() * 9)];
  const [visible, setVisible] = useState(true);
  const [fading, setFading] = useState(false);

  function hideMe() {
    setFading(true);
    setTimeout(() => setVisible(false), 650);
  }

  let style = { borderColor: color, backgroundColor: color };

  return (
    
      
        {word}
        
      

    
  );
}

(注意：默认的动画时长是 1000ms，我使用的是 650ms，为了在设置 display 属性之前减少卡顿/暂停现象，这只是个人喜好)。

这样我们就能得到想要的效果。

构建一个可复用的组件

现在到此为止，但目前有两个问题（对于我来说）

我不想复制/粘贴 Animated 代码块，样式，功能，来重复实现相同效果。
Box 组件混合了不同类型的逻辑，例如：违反了关注点分离的概念。准确的说，Box 的主要功能是渲染卡片内容，但是动画细节混入了。

类组件

我们可以创建一个传统的 React 类组件来管理和动画相关的状态：切换隐藏/显示，设置 display 属性的超时时间。

class AnimatedVisibility extends Component {
  constructor(props) {
    super(props);
    this.state = { noDisplay: false, visible: this.props.visible };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (!nextProps.visible) {
      this.setState({ visible: false });
      setTimeout(() => this.setState({ noDisplay: true }), 650);
    }
  }

  render() {
    return (
      
        {this.props.children}
      
    );
  }
}

然后使用它

function Box({ word }) {
  const color = colors[Math.floor(Math.random() * 9)];
  const [visible, setVisible] = useState(true);

  function hideMe() {
    setVisible(false);
  }

  let style = { borderColor: color, backgroundColor: color };

  return (
    
      
        {word}
        
      

    
  );
}

这就实现了一个可复用的组件，但是还有点复杂，我们还可以优化一下。

React Hooks and useEffect

React Hooks 是 React 16.8 中的新特性，它们为 React 组件的生命周期和状态管理提供了一种更简单的方法

useEffect 钩子为 componentWillReceiveProps 的使用提供了一种优雅的替代方案,它的代码更简洁，我们还可以使用函数式组件。

function AnimatedVisibility({ visible, children }) {
  const [noDisplay, setNoDisplay] = useState(!visible);
  useEffect(() => {
    if (!visible) setTimeout(() => setNoDisplay(true), 650);
    else setNoDisplay(false);
  }, [visible]);

  const style = noDisplay ? { display: "none" } : null;
  return (
    
      {children}
    
  );
}

useEffect 钩子还是有点不一样，它的主要目的是副作用：改变状态，调用异步函数等等。在我们的例子中，它根据之前的 visible 的值修改了内部的 noDisplay 布尔值。

将 visible 作为依赖添加到 useEffect 的依赖数组中，当 visible 的值发生变化时， useEffect 钩子才会被调用。

和类组件的杂乱相比较，我认为 useEffect 是一种更好的解决方案。

组件复用：Sidebars 和 Navbars

大家都喜欢 Sidebar 和 Navbar，我们来添加一个吧。

function ToggleButton({ label, isOpen, onClick }) {
  const icon = isOpen ? (
    
  ) : (
    
  );
  return (
    
  );
}

function Navbar({ open }) {
  return (
    
      
        Item 1
        Item 2
        Item 3
      
    
  );
}

function Sidebar({ open }) {
  return (
    
      
        
          Item 1
          Item 2
          Item 3
        
      
    
  );
}

function App() {
  const [navIsOpen, setNavOpen] = useState(false);
  const [sidebarIsOpen, setSidebarOpen] = useState(false);

  function toggleNav() {
    setNavOpen(!navIsOpen);
  }

  function toggleSidebar() {
    setSidebarOpen(!sidebarIsOpen);
  }

  return (
    
      
        
          
          
        
        
        
      
      
    
  );
}

还没结束...

到这里我们就可以停下了，但就像我之前提到的关注点分离，我更倾向于避免在 Box、Sidebar 和 Navbar 的 render 方法中混合 AnimatedVisibility 组件（代码有点重复）。

我们可以创建一个高阶组件（HOC）。由于状态管理的原因， HOCs 通常会涉及到类组件。

但是使用了 React Hooks，我们只需要组合 HOC 就可以了（函数式编程概念）。

function AnimatedVisibility({
  visible,
  children,
  animationOutDuration,
  disappearOffset,
  ...rest
})
// ... same as before
}


function makeAnimated(
  Component,
  animationIn,
  animationOut,
  animationInDuration,
  animationOutDuration,
  disappearOffset
) {
  return function({ open, className, ...props }) {
    return (
      
        
      
    );
  };
}

export function makeAnimationSlideLeft(Component) {
  return makeAnimated(Component, "slideInLeft", "slideOutLeft", 400, 500, 200);
}

export function makeAnimationSlideUpDown(Component) {
  return makeAnimated(Component, "slideInDown", "slideOutUp", 400, 500, 200);
}

export default AnimatedVisibility

然后在 App.js 中使用这些基于函数式的 HOCs

function Navbar() {
  return (
    
      Item 1
      Item 2
      Item 3
    
  );
}

function Sidebar() {
  return (
    
      
        Item 1
        Item 2
        Item 3
      
    
  );
}

const AnimatedSidebar = makeAnimationSlideLeft(Sidebar);
const AnimatedNavbar = makeAnimationSlideUpDown(Navbar);

function App() {
  const [navIsOpen, setNavOpen] = useState(false);
  const [sidebarIsOpen, setSidebarOpen] = useState(false);

  function toggleNav() {
    setNavOpen(!navIsOpen);
  }

  function toggleSidebar() {
    setSidebarOpen(!sidebarIsOpen);
  }

  return (
    
      
        
          
          
        
          
        
      
      
    
  );
}

接下来呢？

对于简单的动画，可以使用我所提到的方法。如果比较复杂，我会使用像 react-motion 这样的库。

不仅仅是动画，React Hooks 让我们可以编写可读性高、更简洁的代码。但是，我们需要在思维上有个调整，像 useEffect 这样的 Hooks 不完全是 React 生命周期函数的替代品，你需要深入学习和研究。

我建议看看像 useHooks.com 这样的网站，还有像 react-use 这样的库（不同钩子用例的集合）。

原文：https://www.freecodecamp.org/news/animating-visibility-with-css-an-example-of-react-hooks/，作者：Christian Sepulveda

React Hooks - freeCodeCamp.org

如何使用 React、React Hooks 和 Axios 进行 CRUD 操作

如何安装Node和npm

如何创建你的React应用

如何为React安装Semantic UI包（库）

如何构建你的CRUD应用

React Crud Operations

React Crud Operations

如何创建你的CRUD组件

如何为(create Component)创建组件创建一个表格

React Crud Operations

如何使用Axios向Mock APIs发送请求

如何实现读取和更新操作

React Crud Operations

React Crud Operations

React Crud Operations

读取操作

更新(Update)操作

删除操作

让我们对我们的CRUD应用程序做一些改进吧

React Hooks 入门教程——10 分钟学会使用 useState Hook

什么是React Hook？

React Hooks的规则

只在顶层调用钩子

只有React函数的调用钩子

useState hook的结构

何时使用 useState Hook

State 案例 1

State 案例 2

如何在React中使用多个状态变量

异步状态

如何以函数的方式突变状态

如何将状态初始化为函数

总结

最后但同样重要的

更多关于 React Hooks 的内容

React Hooks 初学者指南

什么是 React Hooks

为什么使用 React Hooks

React 中的类可能是相当混乱的

类组件（Classes components）部分很复杂，可能难以理解

Hooks 的组件更短，可读性更好

使用 React Hooks 的规则

最常见的 React Hooks

useState Hook

useEffect Hook

如何有条件地启动一个 Effect

如何在第一次渲染时运行一次

useContext Hook

useReducer Hook

如何创建自定义 Hooks

结语

使用 React Hooks 创建可复用的动画组件

我们将要做什么？

骨架

添加动画

不完全是我们想要的东西

构建一个可复用的组件

类组件

React Hooks and useEffect

组件复用：Sidebars 和 Navbars

还没结束...

接下来呢？