React基础

最新推荐文章于 2024-11-08 15:59:45 发布
最新推荐文章于 2024-11-08 15:59:45 发布
阅读量532 收藏
点赞数
分类专栏： React 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41355222/article/details/123852820
版权

1 使用Reat编写Todolist功能

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

class TodoList extends Component {
  //ECM6 继承语法
  //继承props方法
  constructor(props) {
    super (props);
    this.state = {
      inputValue: '',
      list: []
    }
  }
//input 中的内容存储在 inputValue中
//JSX语法
  render() {
      return (
      <Fragment>
        <div>
          {/* 这是一个注释 */}
          <label htmlFor="insertArea">输入内容：</label>
          <input
            id="insertArea"
            className='input'   //使用class
            value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}  //在这里加this
          /> 
          <button onClick={this.handleBtnClick.bind(this)}>提交</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return <li 
                      key={ index } 
                      onClick={this.hanleItemDelete.bind(this, index)}
                      //不转义显示
                      dangerouslySetInnerHTML = {{__html: item}}
                      >
												{ item }
                      </li>  // 用index做key值不好
            })
          }
        </ul>
      </Fragment>
    )
  }
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
    //console.log(this)
    //this.input.inputValue = e.target.value; //this指向不对哦
    //console.log(e.target.value);          //获得我们输入的内容
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      //把原来数组的内容展开，再增加新的值
      inputValue: ''
    })
  }

  hanleItemDelete(index) {
    // immutable
    // state 不允许我们做任何改变
    //this.state.list.splice(index, 1);  --> 不能这样写

    const list = [...this.state.list]; //拷贝一份
    list.splice(index, 1);
    this.setState({
      list: list
    })
  }
}

export default TodoList;

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

React中：不关注DOM只关注数据即可

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

class TodoList extends Component {
  //ECM6 继承语法
  //继承props方法
  constructor(props) {
    super (props);
    this.state = {
      inputValue: '',
      list: []
    }
  }
//input 中的内容存储在 inputValue中
//JSX语法
  render() {
      return (
      <Fragment>
        <div>
          <input 
            value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}  //在这里加this
          /> 
          <button>提交</button>
        </div>
        <ul>
          <li>学英语</li>
          <li>learn English</li>
        </ul>
      </Fragment>
    )
  }
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
    //console.log(this)
    //this.input.inputValue = e.target.value; //this指向不对哦
    //console.log(e.target.value);            //获得我们输入的内容
  }
}

export default TodoList;

如上是我们编写的Todolist 的一段代码

我们需要注意的有：

1.在React中，编写在元素间的变量要使用{}。（JSX语法）

2.各个元素的状态，我们可以通过继承父类的方法props，然后使用this.state获取元素中的内容。

3.在使用对应的事件，进行一个事件绑定在调用函数的时候，我们要注意的是this的指向，因此我们通过ECM6的bind方法，预先改变该处理函数的一个this指向。

如上述代码中的：handleInputChange(this),我们需要的是组件的this, 来获得其中的值，并修改

4.我们不能通过this.input.inputValue来直接更改值，在React中给我们提供了方法：setState

如下：

this.setState({
      inputValue: e.target.value   //inputValue中的值和e.target.value中的值相等
  })

3 实现TodoList新增删除功能

以下是实现list一个增加和删除的代码

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

class TodoList extends Component {
  //ECM6 继承语法
  //继承props方法
  constructor(props) {
    super (props);
    this.state = {
      inputValue: '',
      list: []
    }
  }
//input 中的内容存储在 inputValue中
//JSX语法
  render() {
      return (
      <Fragment>
        <div>
          <input 
            value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}  //在这里加this
          /> 
          <button onClick={this.handleBtnClick.bind(this)}>提交</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return <li 
                      key={ index } 
                      onClick={this.hanleItemDelete.bind(this, index)}
                      >
                      { item }
                      </li>  // 用index做key值不好
            })
          }
        </ul>
      </Fragment>
    )
  }
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
    //console.log(this)
    //this.input.inputValue = e.target.value; //this指向不对哦
    //console.log(e.target.value);          //获得我们输入的内容
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      //把原来数组的内容展开，再增加新的值
      inputValue: ''
    })
  }

  hanleItemDelete(index) {
    // immutable
    // state 不允许我们做任何改变
    //this.state.list.splice(index, 1);  --> 不能这样写

    const list = [...this.state.list]; //拷贝一份
    list.splice(index, 1);
    this.setState({
      list: list
    })
  }
}

export default TodoList;

3.1 新增li标签

我们要获得List中的值，并且显示在网页上，我们使用数组的map方法进行一个映射

ul标签中
<ul>
  {
    this.state.list.map((item, index) => {
      return <li 
              key={ index } 
              onClick={this.hanleItemDelete.bind(this, index)}
              >
              { item }
              </li>  // 用index做key值不好
    })
  }
</ul>
新增的事件函数
handleBtnClick() {
    this.setState({
    list: [...this.state.list, this.state.inputValue],
    //把原来数组的内容展开，再增加新的值
    inputValue: ''
   })
}

（1）新增li标签

如以上代码，我们使用数组的map方法来返回需要显示的内容。

需要注意的是，每个li必须含有一个关键字 key 并且必须是不同的，在这里我们使用了index，但是在React中，并不推荐使用Index,如果不使用的话，页面就会发出一个警告。

img

（2）添加按键事件方法

我们要改变的是List中的值，

我们同样使用了setState方法，

list: [...this.state.list, this.state.inputValue],

其中...this.state.list，获取原来的值，this.state.inputValue是获取输入框中的内容

之后，我们将输入框中的内容清除。

3.2 删除li标签

//ul标签中
<ul>
  {
    this.state.list.map((item, index) => {
      return <li 
              key={ index } 
              onClick={this.hanleItemDelete.bind(this, index)}
              >
              { item }
              </li>  // 用index做key值不好
    })
  }
</ul>
删除事件方法：
hanleItemDelete(index) {
  // immutable
  // state 不允许我们做任何改变
  //this.state.list.splice(index, 1);  --> 不能这样写

    //拷贝一份
  list.splice(index, 1);
  this.setState({
    list: list
  })
}

我们需要做的是：单击相应的内容，相应的内容就会删除。

  • 首先，我们获取对应的下标，通过bind方法来进行传参
  • 然后，我们创建一个新的list 拷贝 const list = […this.state.list]; 拷贝一份
  • 之后，通过数组的方法splice进行一个删除操作，
  • 最后，我们使用setState的方法来进行一个重新的赋值

【注】再次强调：state 不允许我们做任何改变，每次更改，必须使用setState方法

因此我们不能这样写 this.state.list.splice(index, 1);。这是错误的写法

在React中，我们将其称之为immutable规则。

4 拆分组件与组件之间传值

img

顶层组件：Todolist.js

其它都是子组件：TodoItem.js

我们将Todolist中组件进行一个分离，上面是按钮，下面是现实的li标签

img

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

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

class TodoList extends Component {
  //ECM6 继承语法
  //继承props方法
  constructor(props) {
    super (props);
    this.state = {
      inputValue: '',
      list: []
    }
  }
//input 中的内容存储在 inputValue中
//JSX语法
  render() {
      return (
      <Fragment>
        <div>
          {/* 这是一个注释 */}
            <label htmlFor="insertArea">输入内容：</label>
            <input
                id="insertArea"
                className='input'   //使用class
                value={this.state.inputValue}
                onChange={this.handleInputChange.bind(this)}  //在这里加this
          /> 
          <button onClick={this.handleBtnClick.bind(this)}>提交</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return (
                    <TodoItem 
                        content={item} 
                        index={index}
                        deleteItem = {this.hanleItemDelete.bind(this)} //传递方法
                        />
                    )
                    
            })
          }
        </ul>
      </Fragment>
    )
  }
  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
    //console.log(this)
    //this.input.inputValue = e.target.value; //this指向不对哦
    //console.log(e.target.value);          //获得我们输入的内容
  }

  handleBtnClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      //把原来数组的内容展开，再增加新的值
      inputValue: ''
    })
  }

  hanleItemDelete(index) {
    // immutable
    // state 不允许我们做任何改变
    //this.state.list.splice(index, 1);  --> 不能这样写

    const list = [...this.state.list]; //拷贝一份
    list.splice(index, 1);
    this.setState({
      list: list
    })
  }
}

export default TodoList;
TodoItem.js
import React,{Component}from 'react';

class TodoItem extends Component {

    constructor(props) {
        super (props);
        //使用这种写法，节约性能
        this.handleClick = this.handleClick.bind(this);
    }

    render() {
        return <li key={1} onClick={this.handleClick}>{this.props.content}</li>
    }
    //子组件调用父组件的方法来修改内容
    handleClick(){
        this.props.deleteItem(this.props.index);
    }
}

export default TodoItem;

4.1 父组件传值给子组件并使用

(1)父组件传值给子组件

以上是所有的代码，主要发生改变的是如下代码：

<ul>
  	{
      this.state.list.map((item, index) => {
        return (
          <TodoItem 
          content={item} 
          index={index}
      		deleteItem = {this.hanleItemDelete.bind(this)} //传递方法
      		/>
      	)
			})
    }
</ul>

在父节点中我们通过 <TodoItem />来调用子组件

我们父节点传值，类似属性的方式 变量名 = {传值} 来给子组件传值，然后子组件就可以进行调用了。

(2)子组件使用父组件的值

TodoItem.js
import React,{Component}from 'react';

class TodoItem extends Component {

    constructor(props) {
        super (props);
        //使用这种写法，节约性能
        this.handleClick = this.handleClick.bind(this);
    }

    render() {
        return <li key={1} onClick={this.handleClick}>{this.props.content}</li>
    }
    //子组件调用父组件的方法来修改内容
    handleClick(){
        this.props.deleteItem(this.props.index);
    }
}

export default TodoItem;

我们使用父组件传值给我们，我们通过 this.props.变量名的方法来调用父组件的值。

4.2 子组件调用父组件的方法

(1)父组件传递方法给子组件

父组件传给子组件的方法类似于传值，但是在这里我们需要的是，这个方法的this必须指向的是父组件。因为父组件可以调用该方法，而子组件中没有该函数。

如果没有强制改变this的指向，那么在网页上报错，没有发现该函数，即无法调用。

deleteItem = {this.hanleItemDelete.bind(this)} //传递方法

(2)子组件调用父组件的方法

子组件在进行事件的时候，也要改变this的指向，我们通过如下的方法，比直接使用bind的方法更节约性能。

constructor(props) {
  super (props);
  //使用这种写法，节约性能
  this.handleClick = this.handleClick.bind(this);
}

在调用父节点的方法的时候，我们同样通过，this.props.方法进行调用

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

5 TodoList代码优化

优化主要使用了一些ECM6的语法：

1.大括号解构

const {content} = this.props;

2.箭头函数

3.将强制改变this指向的，写到最前面constructor中，提升效率，之后使用也方便

如： this.handleInputChange = this.handleInputChange.bind(this);

4.将setState中返回函数，而不是对象，异步操作，提升效率

5.使用prevState来表示之前的变量

6.如果在标签中，使用的代码过多，使用函数进行封装。

7.ul标签中的循环，要增加key值，要增加在最外层的元素上，不推荐使用index。

5.1 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;
        //相当于 const content = this.props.conetent;
        return (
            <li  onClick={this.handleClick}>
                {content}
            </li>
        )
    }
    //子组件调用父组件的方法来修改内容
    handleClick(){
        const {deleteItem, index} = this.props;
        deleteItem(index);
    }
}

export default TodoItem;

5.2 TodoList.js

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

class TodoList extends Component {
    //ECM6 继承语法
    //继承props方法
    constructor(props) {
        super (props);
        this.state = {
        inputValue: '',
        list: []
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.hanleItemDelete = this.hanleItemDelete.bind(this);
    }

//input 中的内容存储在 inputValue中
//JSX语法
    render() {
        return (
        <Fragment>
            <div>
            {/* 这是一个注释 */}
                <label htmlFor="insertArea">输入内容：</label>
                <input
                    id="insertArea"
                    className='input'   //使用class
                    value={this.state.inputValue}
                    onChange={this.handleInputChange}  //在这里加this
                /> 
            <button onClick={this.handleBtnClick}>提交</button>
            </div>
            <ul>
            	{this.getTodoItem()} //调用函数方法来实现
            </ul>
        </Fragment>
        )
    }

    getTodoItem() {
        return this.state.list.map((item, index) => {
            return (
                <TodoItem
                    key={index}
                    content={item} 
                    index={index}
                    deleteItem = {this.hanleItemDelete} //传递方法
                />
            )        
        })
    }

    //返回对象 ES6  异步,性能提升  对象变成函数 注意target
    handleInputChange(e) {
        const {value} = e.target;
        this.setState(() =>({
                inputValue: value  
            }))
        }
    /* 
    handleInputChange(e) {
        this.setState({
        inputValue: e.target.value
        })
    } 
    */

    //prevState接受之前的参数
    handleBtnClick() {
        this.setState((prevState) => ({
            list: [...prevState.list, prevState.inputValue],
            inputValue: ''
        }))
    }
    /* 
    handleBtnClick() {
    this.setState({
    list: [...this.state.list, this.state.inputValue],
    //把原来数组的内容展开，再增加新的值
    inputValue: ''
    })
    } */

    hanleItemDelete(index) {    
        this.setState((prevState) => {
            const list = [...prevState.list];
            list.splice(index, 1);
            return {list  /*等效于list:list*/}
        })
    }
    /* 
    hanleItemDelete(index) {  
        const list = [...this.state.list]; 
        list.splice(index, 1);
        this.setState({
          list: list
        })
    } 
    */
}
  
export default TodoList;

运行结果：没有问题！！！！！！！！

img

6 React的概念及思考

6.1 开发方式

命令式编程（先做什么，再做什么） -> DOM操作（Jquery, 原生JS）

声明式开发（react自动根据数据构造页面DOM，这个数据可以理解为图纸。） -> React(节约DOM操作代码)

6.2 可以与其它框架并存（Jquery）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div><span>abc</span></div>
  </body>
</html>

如在index.html中，React只对 <div id="root"></div>生效（因为这里react是挂载在root上的。对于下面的

abc
可以用其他框架，比如jQuery，前提是不能影响它之外的框架。）

其它操作依然可以生效。

img

6.3 组件化开发

首字母大写是组件（首字母小写是标签元素。）

父组件 -> 传值给 子组件

子组件 -> 传值给 父组件 调用父组件的方法（子组件使用父组件传给的方法来修改父组件传的值（不能直接使用未传的方法来修改父组件传的值））

6.4 单向数据流

父组件可以向子组件传递内容，但是子组件只可以使用，但不可以改变（否则会报错，只读不可更改）

为了让开发方便，因为如果多个组件都可以对其进行修改，那么不知道是那个发生改变。

如果要改->通过子组件调用父组件的方法

6.5 视图层的框架

如果是紫色的传值，会很麻烦

因此在开发项目，不仅仅用到React，传值交给其它组件完成，React负责数据和页面渲染

因此，使用flask，Redux来辅助开发（数据层框架负责传值）

imgimg

6.6 函数式编程

维护方便 （给需要测试函数一个参数，通过函数输出来判断函数是否运行正确。）

面向测试的开发流程->前端自动化测试->提高便捷性

Hokwok18
关注
专栏目录
回顾Javascript React基础
10-16
## Javascript React基础回顾 ### 前言 在现代前端开发中，React已经成为了一种不可忽视的技术。它不仅仅是一个库，更是一个能够通过组件化的方式构建用户界面的强大平台。React 的核心理念是声明式的、高效的以及...
学习《深入react技术栈》--简介
weixin_34085658的博客
12-04 182
1. Reat简介 专注于视图层 React不是完整的MVC/MVVM框架，它专注于视图层，提供清晰，简洁的视图层解决方案。听起来和模板引擎很像，但是React又是一个包括view和controller的库。React不像其他框架提供很多复杂的概念和繁琐的API，它以Minimal API Interface为目标，只提供组件化相关的非常...
Vue与React两个框架的区别和优势对比
FJGISer的博客
06-08 2779
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
React前端框架以及和Vue的对比
我的博客
10-14 3182
1.前端框架发展历程？为什么大家抛下jQuery选择Vue、react、angular？为什么Ext、backbone会被冷落？ MVC->MVP(backbone.js)->MVVM() 2.现阶段前端框架中的三驾马车Vue、react之间的比较？ 2.1相同点： 1.两者都支持服务端渲染（ssr=Server-side rendering） ...
React基础.pdf
06-17
### React基础知识点详解 #### 一、React简介与特点 **React**是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它通过一种创新的方法，实现了高效、灵活且可维护的UI开发流程。React的核心优势在于...
react基础文件.zip
06-04
"react基础文件.zip"可能包含一系列学习React基础的资源，如代码示例、教程文档等。让我们深入探讨React的基础知识。 1. **React组件**：React的核心概念是组件，它是可重用的代码块，可以独立渲染HTML到DOM。组件...
react 基础学习
01-15
React 基础学习 React 是一个由Facebook 开发的开源 JavaScript 库，用于构建用户界面。下面是 React 基础学习的相关知识点： 一、React 简介 React 是一个基于组件的 JavaScript 库，用于构建用户界面。它可以...
React 源码学习01 ---- React.Children.map 的实现与应用
止于至善
11-07 437
目前是第一次看这个函数的实现，知道他大概干了什么，也大概明白每一步要干什么，但是目前还不清除他为什么要这么干。为什么要来看他的实现呢？一个是只有知道他是怎么实现的，才能知道在调用这个方法时，那些情况会报错，为什么报错，能够快速处理。使用这个方法开发功能的时候能够更加得心应手。
react中ref使用支持父调用子组件的方法
lwl12345678_的博客
11-05 341
【代码】react中ref使用支持父调用子组件的方法。
LangChain教程 - 创建 ReAct 风格智能代理
fenglingguitar的专栏
11-05 995
ReAct 框架，即 Reasoning and Acting（推理和行动），是一种让模型在处理复杂任务时通过推理逐步制定行动决策的模式。推理：逐步理解任务需求，制定行动计划。行动：在每个步骤中调用所需的工具（如 API、数据库），并基于反馈继续推理。这种模式尤其适合用于构建智能助手、问答系统等复杂应用，能让模型根据上下文灵活选择下一步操作。通过 LangChain 和 ReAct 框架，我们可以构建具备推理与行动能力的智能助手，让其能够逐步分解复杂任务并动态调用工具，为用户提供更智能的服务。
【taro react】 ---- 常用自定义 React Hooks 的实现【六】之类渐入动画效果的轮播
止于至善
11-07 254
组件的实现其实没有太大的难度，就是最近看源码，看到了 React.Children.map 的实现，因此使用这个效果用一下；需要注意的是隐藏显示不要直接操作DOM的显示隐藏，因为DOM的改变会导致图片的重新加载，会出现闪动的效果，这是回流导致的图片重新加载；在组件内渲染子组件的时候依然需要使用 React.Children.map 来循环子组件。
react动态路由
m0_64455070的博客
11-08 380
在React应用中，动态路由（Dynamic Routing）通常指的是根据应用的状态或用户的交互来动态地显示或隐藏路由（页面或组件）。
React 探秘(四)：手撸 mini-react
qq_44983621的博客
11-05 795
至此我们就基本完成了一个简单的 mini-react，上面代码直接截取了关键代码，如果感兴趣的话可以结合下面源码进行本地调试。为我们的入口函数，传入组件和根节点，根据这两个数据初始化初始化我们的。，构建过程需要把 vdom 转化为 fiber ， 其中进行。架构，时间切片，双缓存等，接下来这篇文章实操实现一个。节点的构建，一直复该动作直到没有其他节点.这个阶段是不可暂停的, 采用递归的方式完成。上的存储也是以链表的数据结构存储，存储在。中，然后进行下一个工作循环，此时。，处理完所有的工作单元之后，进入。
【error】 react 控制台报错Invalid hook call
chirp_CQ的博客
11-06 285
导致这个的原因多半都是因为不同版本的react 导致的，我也遇到了，我在多次尝试后发现多半是因为我两个前端项目都同时在本地打开的情况下，webstorm识别到了两个项目的不同react版本。暂时的解决办法是将node_modules 给删除掉，然后重新执行。我的前端react + ant-design-pro项目能正常启动。，这将是对我很大的鼓励！若是对你有所帮助的话，希望能获得你的。
react搭建router，redux教程
m0_74079648的博客
11-04 979
/ 定义仓库// 引入configureStore 定义仓库// 导入counterSlice// 导出// 数据处理reducer: {counter});/** @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE*/// 定义仓库。
数据分析ReAct工作流
最新发布
代码笔记
11-08 122
让我用一个数据分析项目的例子来展示plan-and-execute框架的应用。这个例子会涉及数据处理、分析和可视化等任务。关键是要根据具体需求调整任务定义和执行逻辑。
react组件02
qq_36022463的博客
11-04 939
setState是异步的，会将对象加入一个队列，在一定的时间之后进行统一渲染，，，所以多次调用setState去累加某一个值，是会有问题的。react组件中，，state中的数据，是不可变的，，不要去随意改变state中的数据，，而是浅拷贝一个新的值，修改之后去赋值。react中会设置一个根组件，下面的子元素默认都是在这个根组件下面的，，， 在处理，对话框，提示框，固定定位元素的时候非常有用。高阶组件，本身不是一个组件，是一个函数，，并且这个函数的参数是另一个组件，，返回值也是一个组件。
React 守卫路由
晴天飛 雪的博客
11-07 296
【代码】React 守卫路由。
React基础教程：state与组件生命周期详解
"React基础与State管理" 在React开发中，`state`是管理组件内部数据的关键部分。本文将深入探讨React中的`state`以及React基础用法。 首先，React是一个用于构建用户界面的JavaScript库，它允许我们通过声明式编程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值