React Hook useState – React 白话运动 11

React11-React-Hook-useState

序言

上一篇文章详细介绍了 React 语法, React 生命周期 – React 白话运动 10 我们了解了 React 生命周期的三个阶段,还了解了类对象和函数对象的生命周期。本篇文章将通过一个实际案例来解释 Hooks 中的 useState:

  1. 什么是 useState?
  2. 创建评估 UI 组件
  3. 该组件的重构
  4. 为该组件添加使用状态钩子
  5. 已添加 setState 作为评估组件的新修改器。
  6. 旧版本的 React 状态管理编写

什么是 useState?

useState 是 React 中的一个钩子,用于通过 useState我们可以在功能元素中定义和管理状态数据。

useState 返回包含两个值的数组:

  1. 当前状态:当首次渲染该组件时,其值将等于我们传递给 useState 的初始值
  2. 设置函数:该函数负责更新状态值并触发组件的重新渲染。
				
					const [state, setState] = useState(initialState)
				
			

创建用于评估的用户界面组件

我们将使用 Alex Banks 和 Eve Porcello 编写的 React 教程,但对部分代码进行了一些修改。

由于本篇文章的主题是创建 UI 页面,我们需要使用 react-icons 软件包,它内置了一个包含数百种 SVG 的图库。我们可以在终端输入以下命令下载 react-icons 软件包。

				
					npm i react-icons
				
			

通过 构建 React 项目 - React Vernacular 活动 08 这是快速构建 react 项目的分步指南。

				
					npx create-react-app my-app cd my-app npm start
				
			

这将在本地启动一个 react 项目,然后按如下方式修改 App.js,以获得以下用户界面组件。

				
					import React from &#039;react&#039; import { FaStar } from &#039;react-icons/fa&#039; export default function App() { return (<div>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
    </div>)
}

				
			
react-hook-usestate-01

该组件的重构

重构是指在不改变程序结果的情况下重写代码,从而提高代码的整体质量。

接下来,我们需要根据原始代码重新组织代码,使整个代码变得更加简洁。在这里,我们可以将其分为三个部分:

重组的第一步

您可以先将 FaStar 分割成不同的组件,然后为该组件赋予参数,这里给出的参数是选中的商数,默认值为 true。

				
					const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> )
				
			

重组步骤 2

创建一个函数,在给定长度的情况下,该函数可以快速组合成一个数组。

				
					const createArray = length => [...Array(length)];
				
			

重组步骤 3

最后,在您使用的用户界面中,您使用的是 ES6 数组映射,它会在映射函数中返回相应的索引和组件。

				
					export default function App({ totalStar = 5 }) { return createArray(totalStar).map((n, i) => <Star key={i} />) }
				
			

重组完成后,原程序的执行结果不变,最后的五颗星仍会被送回。

				
					import React from 'react' import { useState } from 'react'; import { FaStar } from 'react-icons/fa' const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> ) const createArray = length => [...Array(length)]; export default function App({ totalStar = 5 }) { const [selectedStars] = useState(3) return createArray (totalStar).map((n, i) => <Star key={i} selected={selectedStars > i} />) }
				
			

为该组件添加使用状态钩子

The refactored code does not yet have any associated data or state. Here we can use some hooks to manage the state of the function.

useState( ) 是我们学习钩子时要学习的第一个函数。我们可以使用以下语法给出组件的状态。

				
					const [variable,setVariable] = useState("");
				
			

在下面的代码示例中,我们在 App 函数中添加了一个名为 selctedStars 的新状态,并将 selctedStars 的值设置为 3。 然后,我们就可以在此组件中根据此变量进行渲染。

				
					import React from 'react' import { useState } from 'react'; import { FaStar } from 'react-icons/fa' const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> ) const createArray = length => [...Array(length)]; export default function App({ totalStar = 5 }) { const [selectedStars] = useState(3) return createArray (totalStar).map((n, i) => <Star key={i} selected={selectedStars > i} />) }
				
			

因为 selctedStars 已设置为 3,而且还在 FaStar 元素中设置了判别式。如果选中为 true,则为红色,否则为黑色,最终会得到下面的组件。

react-hook-usestate-02

setState 新修改函数

useState( ) 不仅可以给出默认值,还可以修改默认值,修改默认值的方法是使用 setState。

在 StarRating 中,您可以添加一个新的 setSelectedStars,在组件中使用。这也为 Star 添加了一个名为 onSelect 的新函数,并将 setSelectedStars 传递进来。

				
					export function StarRating({ totalStars = 5 }) { const [selectedStars, setSelectedStars] = useState(3) return <div>
       {createArray(totalStars).map((n, i) =&gt; 
		<star 
    		key="{i}" 
    		selected="{selectedStars" > i} onSelect={() =&gt; setSelectedStars(i + 1)} /&gt; )}
        <p>
            {selectedStars} of {totalStars} stars
        </p>
    </div>
}
				
			

在这里,我们将一个名为 setSelectedStars 的函数传入 onClick 函数,这样所有星星在被点击时都会触发 setSelectedStars( )。

				
					const Star = ({ selected = true, onSelect = f => f }) => ( <FaStar color={selected ? 'red' : 'gray'} onCLick={onSelect}></FaStar> )
				
			

useState 的完整代码也附后:

				
					import React from &#039;react&#039; import { useState } from &#039;react&#039;; import { FaStar } from &#039;react-icons/fa&#039; const Star = ({ selected = true, onSelect = f =&gt; f }) =&gt; (
    <fastar color="{selected" ? 'red' : 'gray'} onclick="{onSelect}"></fastar>
) const createArray = length =&gt; [...Array(length)]; export function StarRating({ totalStars = 5 }) { const [selectedStars, setSelectedStars] = useState(3) return <div>
        {createArray(totalStars).map((n, i) =&gt; 
		<star 
    		key="{i}" 
    		selected="{selectedStars" > i} onSelect={() =&gt; setSelectedStars(i + 1)} /&gt; )}
        <p>
            {selectedStars} of {totalStars} stars
        </p>
    </div>
}

				
			

旧版本的 React 状态管理编写

旧版指的是早期的类编写方式,因为钩子只能用于函数。这个版本显示了类的状态管理,但理解起来比较困难,因为类有一些面向对象的概念。

与用于预设和更新数据状态的 useState 相比,类组件使用了一个构造函数,该构造函数可以将 starSelected 的默认值设为 0,还可以绑定到类中声明的函数 change,然后使用 render( ) 函数渲染组件。

				
					import React, { Component } from &#039;react&#039; import { FaStar } from &#039;react-icons/fa&#039; const Star = ({ selected = true }) =&gt; (
    <fastar color="{selected" ? 'red' : 'gray'}></fastar>
) const createArray = length =&gt; [...Array(length)]; export default class StarRating extends Component { constructor(props) { super(props); this.state = { starSelected: 0 }; this.change = this. change.bind(this); } change(starSelected){ this.setState({starSelected}); } render(){ const {totalStars} = this.props; const {starSelected} = this.state; return (
            <div>
                {[...Array(totalStars)].map((n,i)=&gt;{
                    <Star 
                        key={i} 
                        selected={i &lt; starSelected} onClick={()=&gt;this.change(i+1)} /&gt; })}
                <p>
                    {starSelected} of {totalStars} stars
                </p>
            </div>
        )
    }
}
				
			

结论

这篇 React 文章更加程序化,通过一个真实的例子展示了可视化界面,并与早期的写作风格进行了单独比较。如果您有任何建议或问题,欢迎留言!

如果您喜欢这一系列文章,请不要犹豫,点击 "喜欢 "并分享,让更多人看到它!

引用

React白話文運動12-React Hook-useState 01

React白話文運動13-React Hook-useState 02

React Document

React 白話文運動系列

React 生命周期 – React 白话运动 10

React Props – React 白話文運動 09

建立React專案 – React 白話文運動 08

Babel & Webpack & NPM - React 白皮书活动 07

React JSX – React 06

React 如何工作 - React 05

JavaScript 高级函数 - React 04

JavaScript 异步等待 - React 白话运动 03

JavaScript ES6 对象 - React 白皮书活动 02

JavaScript ES6 - React 白皮书活动 01

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

zh_CN简体中文