AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

初探react，用react实现一个todoList功能

2024-09-28 35
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 该文章通过创建一个TodoList应用来介绍React的基础知识，包括环境搭建、组件创建、状态管理和事件处理，并演示了如何使用React Hooks来优化组件逻辑。

🛰️前言

对于前端而言， react 是前端三大主流框架之一。而在现实生产中，基本上很多大型公司也会偏向于使用 react ，原因在于 react 的 diy 能力比起其他框架也会稍微要更好一些~

紧跟着新技术的步伐，周一也开始学期了 react 。那在下面的文章中，将讲解关于 react 的一些基础知识点，同时呢，也将用 react 来实现一个 TodoList 的功能。

叮咚，开始奇妙的 eract 之旅~🚋

🚀一、react基础

在对 todoList 功能进行设计之前，我们先来了解一点 react 相关的基础知识。

1. react简介

对于 reactjs 来说，需要了解的一些基础知识主要有以下几点：

  • reactjs → react native → react VR ；
  • 由 Facebook 推出的一款框架，于 2013 年开源于社区；
  • react 拥有丰富的函数式编程；
  • react 目前在全球范围内，是使用人数最多的前端框架，同时它拥有健全的文档与完善的社区；
  • React Fiber 是 React 16 的版本，它为 React 做了很多底层的优化。

2. 开发环境搭建

在进入 react 的基础学习之前，我们首先来搭建 react 的开发环境。对于 react 的环境搭建来说，一般有两种方式，分别是：

  • 通过引入 .js 文件来使用 React ；
  • 通过脚手架工具来编码，比如 GRUNT 、 Gulp 和 webpack ；
  • 使用 create-react-app 来搭建环境。

那么现在，我们用 create-react-app 来搭建一个 react 项目。具体命令行如下：

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

3. 工程目录文件简介

初始化完一个项目后，我们来了解下 react 的项目结构。具体如下：

├── public
  ├── favicon.ico 网页icon
  ├── index.html 首页的html模板
  ├── manifest.json 缓存文件
├── src
  ├── App.css 
  ├── App.js 填写组件的内容
  ├── App.test.js 自动化测试文件
  ├── index.css
  ├── index.js 整个程序运行的入口文件
  ├── logo.svg
  ├── registerServiceWorker 借助网页写手机app的功能
├── README.md 项目的说明文件
├── yarn.lock 项目依赖安装包的一些版本号

4. react中最基础的JSX语法

以前我们在写像 <div></div> 这种类似的语法时，一般都是写在 HTML 文件里面。那么，在 react 中，像 <div></div> 这种类型的代码，是在 JS 中去写的。因此，在 js 中写的 html 代码，被称之为 jsx 语法。

值得注意的是，在 react 中使用自己定义的组件时，组件名必须以大写为开头，小写开头在 jsx 中是不支持的，这一点需要稍微注意一下。

所以，一般看到以大写为开头时，比如 <App /> ，则说明是我们自己定义的组件。如果是小写为开头时，则一般是原始的 HTML5 标签，如 <div></div> 。

🛸二、使用react编写TodoList功能

1. 页面构思

首先，我们需要先来对页面的内容进行构造。我们在项目的 src文件夹下创建一个文件，命名为 TodoList 。具体代码如下：

import React, {
    Component, Fragment } from 'react';

class TodoList extends Component {
   
    render() {
   
        return (
            <Fragment>
            <div>
                <input />
                <button></button>
            </div>
            <ul>
                <li>学英语</li>
                <li>Learning React</li>
            </ul>
            </Fragment>
        )
    }
}

export default TodoList;

此时浏览器的显示效果如下：

todolist显示效果

2. React中的响应式设计思想和事件绑定

上面我们简单了显示了 todolist 的基本功能，那现在，我们想要实现的是，点击提交按钮，可以把 input 框里面的内容显示在列表下方，这又该怎么处理呢？

如果按照我们正常的思维来想的话，我们可能会觉得，在提交按钮中绑定一个事件，之后呢，当点击绑定按钮时，获取到 input 框的值，进行绑定提交。

但事实上， react 强调的是，我们不要直接操作 DOM ，而是要操作数据。当数据发生变化时， react 会自动地感知到我们数据发生的变化，会自动地帮我们生成 DOM 。

因此，在写 react 时，我们不需要关心 DOM 层面的操作，只需要去关心数据层面的操作即可。

现在，我们先来监听 input 框的值。具体代码如下：

import React, {
    Component, Fragment } from 'react';

class TodoList extends Component {
   

    constructor(props) {
   
        super(props);
        this.state = {
   
            inputValue: 'hello!!',
            list: []
        }
    }

    render() {
   
        return (
            <Fragment>
            <div>
                <input 
                    value = {
   this.state.inputValue}
                    onChange = {
   this.handleInputChange.bind(this)}
                />
                <button>提交</button>
            </div>
            <ul>
                <li>学英语</li>
                <li>Learning React</li>
            </ul>
            </Fragment>
        )
    }

    handleInputChange(e) {
   
        this.setState({
   
            inputValue: e.target.value
        })

    }
}

export default TodoList;

此时浏览器的打印效果为：

input框值绑定显示效果

大家可以看到，我们正确的使得 input 框响应到了数据。

那在上面的这段代码中，需要了解的知识点有以下几点。分别是：

  • state 负责存储组件中的数据；
  • 如果想要在 html 代码中用一些 js 的表达式，那么要记得用 {} 进行包裹；
  • 在进行事件绑定时，记得使用 bind(this) 对事件的作用域进行变更；
  • 当你想要改变数据项时，不能直接使用 this.state 来改变数据的值，要通过 setState 函数来进行改变。

3. 实现TodoList新增删除功能

（1）新增功能

在上面的例子中，我们实现了 input 框中值的获取。那现在，我们要来实现点击提交这个按钮，能够实现对 input 框中值的新增。同样地，是在 TodoList.js 文件下进行修改。具体代码如下：

import React, {
    Component, Fragment } from 'react';

class TodoList extends Component {
   

    constructor(props) {
   
        super(props);
        this.state = {
   
            inputValue: 'Monday',
            list: []
        }
    }

    render() {
   
        return (
            <Fragment>
            <div>
                <input 
                    value = {
   this.state.inputValue}
                    onChange = {
   this.handleInputChange.bind(this)}
                />
                <button onClick={
   this.handleBtnClick.bind(this)}>提交</button>
            </div>
            <ul>
                {
   
                    this.state.list.map((item, index) => {
   
                        return <li key={
   index}>{
    item }</li>
                    })
                }
            </ul>
            </Fragment>
        )
    }

    handleInputChange(e) {
   
        this.setState({
   
            inputValue: e.target.value
        })
        // console.log(e.target.value)
    }

    handleBtnClick() {
   
        // ... 展开运算符会将之前的数组进行展开，并生成一个全新的数组
        // 将input框的值和list的值进行合并形成一个新的数组
        this.setState({
   
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }
}

export default TodoList;

此时浏览器的显示效果如下：

input框中值的新增功能

在上面的代码中，需要了解的知识点有：

  • 我们先在 button 中绑定了 handleBtnClick 事件；
  • 之后通过展开运算符 ... ，将数组的内容给合并到 list 数组中；
  • 最后，使用 js 中的 map() 方法，将数组列表中的内容给遍历出来。

（2）删除功能

继续，我们来实现删除功能。具体代码如下：

import React, {
    Component, Fragment } from 'react';

class TodoList extends Component {
   

    constructor(props) {
   
        super(props);
        this.state = {
   
            inputValue: 'Monday',
            list: []
        }
    }

    render() {
   
        return (
            <Fragment>
                <div>
                    <input
                        value={
   this.state.inputValue}
                        onChange={
   this.handleInputChange.bind(this)}
                    />
                    <button onClick={
   this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {
   
                        this.state.list.map((item, index) => {
   
                            return (
                                <li
                                    key={
   index}
                                    onClick={
   this.handleItemDelete.bind(this, index)}
                                >
                                    {
   item}
                                </li>
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }

    handleInputChange(e) {
   
        this.setState({
   
            inputValue: e.target.value
        })
    }

    handleBtnClick() {
   
        this.setState({
   
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }

    handleItemDelete(index) {
   
        const list = [...this.state.list];
        list.splice(index, 1);

        this.setState({
   
            list: list
        })
    }
}

export default TodoList;

在上面的代码中，我们在每一个 <li> 标签下绑定了 handleItemDelete 事件，之后呢，通过传递它的 id 值 index ，同时，配合 splice() 方法，来删除掉掉 list 中具体的内容。

值得注意的是，在 react 中，它是不允许我们对 state 做任何改变的。比如说，我们想要把上面删除代码的逻辑这么写：

handleItemDelete(index) {
   
    this.state.list.splice(index, 1);

    this.setState({
   
        list: this.state.list
    })
}

如果我们直接去操作 this 来改变最后的结果，这会使得函数变得很难用。同时，这种方式在 react 中也是不允许滴！这是应该注意的一个点！

🪐三、对TodoList功能进行进阶操作

1. JSX语法细节补充

（1）自动转义

如果在 jsx 中，我们希望显示一些内容，且这些内容我们希望它自动转义。像下图这样：

不转义前效果

大家可以看到，如果不转义时，那么它直接显示除出了 <h1></h1> 标签。但其实我们希望的是，想要把它转义成一级标签的内容。那应该怎么处理呢？

我们就通过 dangerouslySetInnerHTML 这个属性来对 html 进行设置，已达到对 <li> 标签下的内容进行改变，具体代码如下：

<li
    key={
   index}
    onClick={
   this.handleItemDelete.bind(this, index)}
    dangerouslySetInnerHTML={
   {
    __html: item }}
    >
</li>

我们来看下显示效果：

html转义

通过对 dangerouslySetInnerHTML 的设置，我们 html 的内容进行了转义。

（2）光标聚焦

在实际的实践中，对于 input 框来说，我们往往会想要点击某个文本，然后让它去聚焦到 input 框中输入内容。那这应该怎么处理呢？

我们继续来改造 jsx 代码。具体代码如下：

render() {
   
        return (
            <Fragment>
                <div>
                    <label htmlFor="insertArea">输入内容</label>
                    <input
                        id="insertArea"
                        className="input"
                        value={
   this.state.inputValue}
                        onChange={
   this.handleInputChange.bind(this)}
                    />
                    <button onClick={
   this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {
   
                        this.state.list.map((item, index) => {
   
                            return (
                                <li
                                    key={
   index}
                                    onClick={
   this.handleItemDelete.bind(this, index)}
                                    dangerouslySetInnerHTML={
   {
    __html: item }}
                                >
                                </li>
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }

此时浏览器的显示效果为：

光标聚焦

大家可以看到，当我们点击输入内容这四个字时，光标就自动地聚焦到 input 框上，并且能够进行自由地输入。那这样的功能是怎么实现的呢？

在上面的代码中，我们可以看到，通过 label 标签和 htmlFor 来对内容进行绑定，以达到最终我们想要实现的效果。

2. 拆分组件与组件之间的传值

在实际的项目中，对于一个大的组件来说，我们总是会对其进行组件拆分。那对于上面这个 todoList 组件来说，也不例外。

我们可以把①输入内容，② input 框 和 ③提交按钮拆分成一个组件。之后呢，把 list 列表拆分成另外一个组件。那接下来我们来对这个组件进行拆分以及父子组件间数据的传递。

首先我们在项目的 src 文件夹下添加一个新的文件。命名为 TodoItem.js 。具体代码如下：

import React, {
    Component } from 'react';

class TodoItem extends Component {
   

    constructor(props) {
   
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    render() {
   
        return (
            <div
                onClick={
   this.handleClick}>
                {
   this.props.content}
            </div>
        )
    }

    handleClick() {
   
        this.props.deleteItem(this.props.index);
    }
}

export default TodoItem;

现在，我们来改造 TodoList.js 文件。具体代码如下：

import React, {
    Component, Fragment } from 'react';
import './style.css';
import TodoItem from './TodoItem';

class TodoList extends Component {
   

    constructor(props) {
   
        super(props);
        this.state = {
   
            inputValue: 'Monday',
            list: []
        }
    }

    render() {
   
        return (
            <Fragment>
                <div>
                    <label htmlFor="insertArea">输入内容</label>
                    <input
                        id="insertArea"
                        className="input"
                        value={
   this.state.inputValue}
                        onChange={
   this.handleInputChange.bind(this)}
                    />
                    <button onClick={
   this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {
   
                        this.state.list.map((item, index) => {
   
                            return (
                                <div>
                                    {
   /* 父组件将content，index 和 deleteItem 将对应的内容传递给子组件 */}
                                    <TodoItem
                                        content={
   item}
                                        index={
   index}
                                        deleteItem={
   this.handleItemDelete.bind(this)}
                                    />
                                    {
   /*<li
                                        key={index}
                                        onClick={this.handleItemDelete.bind(this, index)}
                                        dangerouslySetInnerHTML={
   { __html: item }}
                                    >
                                    </li>*/}
                                </div>
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }

    handleInputChange(e) {
   
        this.setState({
   
            inputValue: e.target.value
        })
        // console.log(e.target.value)
    }

    handleBtnClick() {
   
        // ... 展开运算符会将之前的数组进行展开，并生成一个全新的数组
        // 将input框的值和list的值进行合并形成一个新的数组
        this.setState({
   
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }

    handleItemDelete(index) {
   
        const list = [...this.state.list];
        list.splice(index, 1);

        this.setState({
   
            list: list
        })
    }
}

export default TodoList;

就这样，我们对组件进行拆分，达到了与上面未拆分前一样的效果。

那现在，我们来梳理下其中的知识点。主要有以下两个知识点：

  • 如何进行组件的拆分
  • 父组件向子组件传递值，应该怎么传递

首先，我们创建了一个新的文件 TodoItem ，来存放列表的内容，这是第一点。

其次，有了列表的内容后，我们要来想，父子组件间的数据，怎么传递。那事实上，父组件向子组件传递内容，通过属性的形式来传递。大家看到父组件中 <TodoItem /> 的位置，在父组件中，通过 content={item} 这样的形式，来把 item 命名为 content ，并将其传递给子组件。

而对于子组件 <TodoItem /> 来说，它将以 this.props 的方式来调用父组件的数据和事件。

3. TodoList代码优化

在上面的代码中，我们对组件进行拆分，以及实现了父子组件间的数据传递。

但细心的小伙伴可能已经发现，代码这么写可能还不够美观。因此，我们来对这两个组件的代码进行优化。

首先是 TodoItem.js 。具体代码如下：

import React, {
    Component } from 'react';

class TodoItem extends Component {
   

    constructor(props) {
   
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    render() {
   
        const {
    content } = this.props;
        return (
            <div onClick={
   this.handleClick}>
                {
   /* {this.props.content} */}
                {
   content}
            </div>
        )
    }

    handleClick() {
   
        const {
    deleteItem, index } = this.props;
        deleteItem(index);
    }
}

export default TodoItem;

我们把 this.props 给单独提取出来，之后再将其放在组件当中使用。同时呢，我们还对 this.handleClick.bind(this) 单独提取出来，这样也使得组件更加美观。

其次，我们来改造 TodoList.js 。具体代码如下：

import React, {
    Component, Fragment } from 'react';
import TodoItem from './TodoItem';
import './style.css';

class TodoList extends Component {
   

    constructor(props) {
   
        super(props);
        this.state = {
   
            inputValue: 'Monday',
            list: []
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleItemDelete = this.handleItemDelete.bind(this);
    }

    render() {
   
        return (
            <Fragment>
                <div>
                    <label htmlFor="insertArea">输入内容</label>
                    <input
                        id="insertArea"
                        className="input"
                        value={
   this.state.inputValue}
                        onChange={
   this.handleInputChange}
                    />
                    <button
                        onClick={
   this.handleBtnClick}
                    >
                        提交
                    </button>
                </div>
                <ul>
                    {
   this.getTodoItem()}
                </ul>
            </Fragment>
        )
    }

    getTodoItem() {
   
        // 父组件将content，index 和 deleteItem 将对应的内容传递给子组件
        return this.state.list.map((item, index) => {
   
            return (
                < TodoItem
                    key={
   index}
                    content={
   item}
                    index={
   index}
                    deleteItem={
   this.handleItemDelete}
                />
            )
        })
    }

    handleInputChange(e) {
   
        const value = e.target.value;
        this.setState(() => ({
   
            inputValue: value
        }));
        // console.log(e.target.value)
    }

    handleBtnClick() {
   
        // prevState表示在修改数据之前数据是怎么样的，避免不小心的改变state的状态
        this.setState((prevState) => ({
   
            list: [...prevState.list, prevState.inputValue],
            inputValue: ''
        }));
    }

    handleItemDelete(index) {
   
        this.setState((prevState) => {
   
            const list = [...prevState.list];
            list.splice(index, 1);
            return {
    list };
        });
    }
}

export default TodoList;

同样地，我们先把 handleInputChange 、 handleBtnClick 、 handleItemDelete 这三个事件给抽离出来。

其次呢，我们把 this.state.list.map() 给单独出来形成 getTodoItem() 方法，并使用 {this.getTodoItem()} 进行调用。

最后，我们分别对事件中的 this.setState({}) 进行升级改造，将当前所有事件中的所有数据都封装在一个函数内。

🌠四、围绕React衍生出的思考

上面我们基本完成了对 TodoList 功能的开发。那么现在，我们将围绕着我们所学的，来衍生出 react 的一些番外的知识点。具体如下：

  • 声明式开发 —— 以前我们在 js 的开发中，都是大量的操作 DOM ，这种开发方式称为命令式开发。到现在，我们在使用 react 时，基本都是直接操作数据，而不是操作 DOM 。那么这样的开发方式，被称为是声明式开发。
  • 可以与其他框架并存
  • 组件化方式开发
  • 单向数据流 —— 在 react 中，父组件允许往子组件传值，但是子组件只能去使用这个值，而不能去改变这个值。
  • 视图层框架 —— 只帮助我们解决数据和页面上的内容，并不负责组件间怎么传值，如何传值。
  • 函数式编程 —— 当一个函数内容变得多时，可以进行拆分。每一个函数各司其职，使得代码更具有维护性。同时，给前端的自动化测试带来巨大的便捷性。

🌌五、结束语

在上面的文章中，我们学到了关于 react 的一些基础知识。除此之外呢，我们还对 TodoList 进行了基础编写和进阶操作编写。与此同时，我们还围绕 React 衍生出了一些思考。不知道小伙伴们是否对 react 有一些了解了呢？

✈️彩蛋

  • 关注公众号星期一研究室，第一时间关注优质文章，更有面试专栏待你解锁~
  • 如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😉
  • 以上就是本文的全部内容！我们下期见！👋👋👋
文章标签：
前端开发
JavaScript
测试技术
移动开发
存储
关键词：
React Native功能
React Native todolist功能
React Native todolist
周一同学Zelina
目录
相关文章
m0_黎明
|
7月前
|
前端开发
React查询、搜索类功能的实现
React查询、搜索类功能的实现
m0_黎明
69 0
石小石Orz
|
4月前
|
存储 前端开发 JavaScript
最适合新手学习的react案例-Todolist尊享版！
【8月更文挑战第13天】最适合新手学习的react案例-Todolist尊享版！
石小石Orz
65 2
最适合新手学习的react案例-Todolist尊享版！
前端徐徐
|
2月前
|
移动开发 前端开发 JavaScript
React DnD：实现拖拽功能的终极方案？
本文首发于微信公众号“前端徐徐”，介绍了一个强大的 React 拖拽库——React DnD。React DnD 帮助开发者轻松创建复杂的拖拽界面，适用于 Trello 风格的应用、列表重排序、可拖拽的 UI 组件等场景。文章详细介绍了 React DnD 的基本信息、主要特点、使用场景及快速上手指南。
前端徐徐
164 3
React DnD：实现拖拽功能的终极方案？
六卿
|
3月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中，可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库，然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果，可以生成不同样式的HTML元素来高亮显示文本差异。
六卿
159 1
react项目配合diff实现文件对比差异功能
dufadayang
|
3月前
|
前端开发
React 中购物车功能实现(全选多选功能实现)
React 中购物车功能实现(全选多选功能实现)
dufadayang
46 2
你都不懂
|
4月前
|
前端开发
React滚动加载（无限滚动）功能实现
【8月更文挑战第28天】
你都不懂
189 4
土木林森
|
4月前
|
存储 JavaScript 前端开发
探索React状态管理：Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中，状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案：Redux、MobX和Context API。Redux采用单一存储模型，提供预测性状态更新；MobX利用装饰器语法，使状态修改更直观；Context API则允许跨组件状态共享，无需第三方库。每种方案各具特色，适用于不同场景，选择合适的工具能让React应用更加高效有序。
土木林森
96 0
土木林森
|
7月前
|
存储 前端开发 JavaScript
【亮剑】在React中，处理`onScroll`事件可实现复杂功能如无限滚动和视差效果
【4月更文挑战第30天】在React中，处理`onScroll`事件可实现复杂功能如无限滚动和视差效果。类组件和函数组件都能使用`onScroll`，通过`componentDidMount`和`componentWillUnmount`或`useEffect`添加和移除事件监听器。性能优化需注意节流、防抖、虚拟滚动、避免同步计算和及时移除监听器。实战案例展示了如何用Intersection Observer和`onScroll`实现无限滚动列表，当最后一项进入视口时加载更多内容。合理利用滚动事件能提升用户体验，同时要注意性能优化。
土木林森
494 0
无妄的罪
|
7月前
|
JavaScript 前端开发
在React和Vue中实现锚点定位功能
在React和Vue中实现锚点定位功能
无妄的罪
193 1
土木林森
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统：React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库，以其虚拟DOM机制和组件化设计，成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容，帮助开发者更好地理解和使用React。
土木林森
77 9

热门文章

最新文章

  • 1
    「前端工程化」从0-1搭建react，ts脚手架（1.2w字超详细教程）
  • 2
    【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
  • 3
    React Native 运行报错 error in opening zip file
  • 4
    react学习系列4 组件生命周期
  • 5
    React Native填坑之旅 -- 回归小插曲
  • 6
    react组件优化-优化setState过程
  • 7
    react + zarm 实现新增账单弹窗封装
  • 8
    react实战笔记68:react中的内联样式
  • 9
    react实战笔记137-创建RTKQ简介3
  • 10
    React-10：React类中自定义方法的this指向
  • 1
    React和Next.js开发常见的HTTP请求方法
    134
  • 2
    你可能没有关注过的 React 性能优化，帮你突破瓶颈
    50
  • 3
    React Hooks - useState 的使用方法和注意事项(1)，web前端开发前景
    51
  • 4
    React useMemo钩子指南：优化计算性能
    106
  • 5
    掌握React中的useCallback：优化性能的秘诀
    108
  • 6
    深入理解React中的useReducer：管理复杂状态逻辑的利器
    218
  • 7
    掌握React中的useContext：访问父组件数据的神奇技巧
    170
  • 8
    掌握React中的useEffect：函数组件中的魔法钩子
    165
  • 9
    深入理解React中的useState：函数组件状态管理的利器
    314
  • 10
    React Hooks：让你轻松掌握函数组件的状态与管理
    127

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • Vue.js 入门与实战

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS