Redux入门

最新推荐文章于 2024-05-20 16:31:04 发布
最新推荐文章于 2024-05-20 16:31:04 发布
阅读量511 收藏 4
点赞数 4
分类专栏： 前端技术相关 文章标签： Redux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34829447/article/details/81503227
版权

1.Redux概念简述

Redux设计理念

  • Redux设计理念如上图，Redux要求把数据放到公共存储区域Store里，组件中尽量少放数据。当蓝色组件修改公共数据时，Store中的值发生改变，其他使用到该数据的组件到Store中取修改后的值即可。

  • Redux = Reducer+Flux

    Flux原本是官方提供的辅助React的数据层框架，但公共数据存储区域由于有很多Store而出现问题，故最终升级成Redux。

2.Redux工作流程

Redux工作流程
* ReactComponents:每个组件（理解：借书的人）
* Store:存储数据的公共区域（理解：图书管理员）
* Action Creators:组件想获取的数据（理解：说的要借的书的话）
* Reducers:Store查询的内容（理解：管理员查看书的记录本）
* 用于理解的工作流程：可以看做是你到图书馆借书，你是借书的人[React Components]，你说了一句你想借什么书[Action Creators]告诉图书管理员[Store]，图书管理员查看他的记录本[Reducers]，并返回给你你要的书。

3.使用Ant Design(React的UI框架)实现ToList页面布局

  • 安装Ant Design:yarn add antd或npm install antd --save

  • 使用Ant Design组件实例：

    //Todolist.js
import React ,{Component} from 'react';
import 'antd/dist/antd.css';//antd是全局变量
import {Input,Button,List} from 'antd';

const Names = [
    'Jack',
    'Sam',
    'Tom',
    'Daming'
]

class Todolist extends Component{
    render(){
        return(
            <div style={{marginTop:'10px',marginLeft:"10px"}}>
                <div>
                    {/*输入框组件*/}
                    <Input placeholder="todoInfo" style={{width:'300px',marginRight:'10px'}}/>
                    {/*按钮组件*/}
                    <Button type="primary">提交</Button>
                    {/*列表组件
                        header列表头
                        footer列表底
                        bordered列表有边框
                        dataSource列表渲染的数据资源
                        renderItem怎么渲染，dataSource中的每一个数据都会调用renderItem中的函数进行渲染，将每一条数据渲染成List.Item的组件，数据的内容就是dataSource中每一项数据的内容
                    */}
                    <List
                        header={<div>header</div>}
                        footer={<div>footer</div>}
                        bordered
                        dataSource={Names}
                        renderItem={item=>(<List.Item>{item}</List.Item>)}
                        style={{marginTop:'10px',width:'300px'}}
                    />
                </div>
            </div>
        )
    }
}
export default Todolist;
    • 使用时需要引入Ant Design的css样式【ant是全局变量】：import 'antd/dist/antd.css';
    • 使用对应组建时可以直接到Ant Design首页查看组件引入代码并使用：https://ant.design/docs/react/introduce-cn
    • 简单Input、Button、List组件的引用可参见上方代码，通过属性增改对应内容

4.创建Redux中的store

  • 安装redux:yarn add redux
  • (为了结构整齐，创建store文件夹，并新建index.js)在index.js中引入redux中的createStore方法，创建store的时候const store = createStore(reducer);需要将reducer(在store文件下创建reducer.js)传进来[可以理解为:创建管理员的时候要把小本子给他]。reducer(负责管理应用里的数据)，返回的是一个函数，两个参数，第一个参数state是数据，action表示操作。使用时可以使用this.getState()获取store中的数据。

  • 完整代码:

    //【store/reducer.js】
const defaultState = {
//当前store中有inputValue和list两条数据
inputValue:'123',
list:[1,2]
}
//reducer是笔记本，笔记本中存放关于图书馆书籍的数据和对数据的操作内容,state即是整个图书馆里书籍的信息(Store中的数据)
export default (state=defaultState,action)=>{
return state;
}

//【store/index.js】
import {createStore} from 'redux'
import reducer from './reducer' //将笔记本引入进来
//创建数据的公共存储仓库
const store = createStore(reducer);
export default store;

//【Todolist.js】
import React ,{Component} from 'react';
import 'antd/dist/antd.css';//antd是全局变量
import {Input,Button,List} from 'antd';
import store from './store/index' //也可以直接写成 import store from './store' 会默认直接找index.js

class Todolist extends Component{
constructor(props) {
  super(props);
  //console.log(store.getState()); //store的方法，用于获取store中的数据
  this.state=store.getState();
  console.log(this.state);
}
render(){
    return(
        <div style={{marginTop:'10px',marginLeft:"10px"}}>
            <div>
                {/*输入框组件*/}
                <Input placeholder="todoInfo" style={{width:'300px',marginRight:'10px'}} value={this.state.inputValue}/>
                {/*按钮组件*/}
                <Button type="primary">提交</Button>
                {/*列表组件
                    header列表头
                    footer列表底
                    bordered列表有边框
                    dataSource列表渲染的数据资源
                    renderItem怎么渲染，dataSource中的每一个数据都会调用renderItem中的函数进行渲染，将每一条数据渲染成List.Item的组件，数据的内容就是dataSource中每一项数据的内容
                */}
                <List
                    header={<div>header</div>}
                    footer={<div>footer</div>}
                    bordered
                    dataSource={this.state.list}
                    renderItem={item=>(<List.Item>{item}</List.Item>)}
                    style={{marginTop:'10px',width:'300px'}}
                />
            </div>
        </div>
    )
}
}
export default Todolist;

5.Action和Reducer的编写

  • 在Chrome网上应用店安装Redux DevTools（Chrome浏览器插件，用于调试Redux）

  • 网页上使用开发者工具Redux调试需要在createStore第二个参数写上window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()。表示如果window有变量(Redux的开发者工具扩展)则执行对应方法(使用对应工具)。

  • 注意：reducer可以接收state，但是不能修改state（通常是将之前的state拷贝一份出来，改变拷贝的state，return改变后的state，return的数据返回给了store，store会拿新的数据替换老的数据，此时store中的数据就被替换了）。

  • 实例代码：

    //[store/reducer.js]
const defaultState = {
    //当前store中有inputValue和list两条数据
    inputValue:'123',
    list:[1,2]
}

//reducer是笔记本，笔记本中存放关于图书馆书籍的数据和对数据的操作内容,state即是整个图书馆里书籍的信息(Store中的数据)
//reducer可以接受state，但是不能修改state
export default (state=defaultState,action)=>{
    console.log(state,action); //state表示上次的存储state，action表示用户传递过来的那句话
    if(action.type === 'change_input_value'){
        const newState = JSON.parse(JSON.stringify(state));//对之前的state做一个深拷贝
        newState.inputValue = action.value;
        return newState;
    }else if(action.type === 'add_todo_item'){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list = [...newState.list,newState.inputValue];
        newState.inputValue='';
        return newState;
    }
    return state;
}

//[store/index.js]
import {createStore} from 'redux'
import reducer from './reducer' //将笔记本引入进来
//创建数据的公共存储仓库
const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;

//[Todolist.js]
import React ,{Component} from 'react';
import 'antd/dist/antd.css';//antd是全局变量
import {Input,Button,List} from 'antd';
import store from './store/index' //也可以直接写成 import store from './store' 会默认直接找index.js
class Todolist extends Component{
    constructor(props) {
      super(props);
      //console.log(store.getState()); //store的方法，用于获取store中的数据
      this.state=store.getState();
      console.log(this.state);
      this.handleInputChange = this.handleInputChange.bind(this);
      this.handleStoreChange = this.handleStoreChange.bind(this);
      this.handleButtonClick = this.handleButtonClick.bind(this);
      store.subscribe(this.handleStoreChange);//将handleStoreChange函数订阅给store，每当store中的数据发生变化的时候将调用此函数
    }

    render(){
        return(
            <div style={{marginTop:'10px',marginLeft:"10px"}}>
                <div>
                    {/*输入框组件*/}
                    <Input placeholder="todoInfo" onChange={this.handleInputChange} style={{width:'300px',marginRight:'10px'}} value={this.state.inputValue}/>
                    {/*按钮组件*/}
                    <Button type="primary" onClick={this.handleButtonClick}>提交</Button>
                    {/*列表组件
                        header列表头
                        footer列表底
                        bordered列表有边框
                        dataSource列表渲染的数据资源
                        renderItem怎么渲染，dataSource中的每一个数据都会调用renderItem中的函数进行渲染，将每一条数据渲染成List.Item的组件，数据的内容就是dataSource中每一项数据的内容
                    */}
                    <List
                        header={<div>header</div>}
                        footer={<div>footer</div>}
                        bordered
                        dataSource={this.state.list}
                        renderItem={item=>(<List.Item>{item}</List.Item>)}
                        style={{marginTop:'10px',width:'300px'}}
                    />
                </div>
            </div>
        )
    }
    handleInputChange(e){
        //创建action
        const action = {
            type:'change_input_value',//描述要做的事情
            value:e.target.value //表示改变inputvalue，变成e.target.value
        }
        store.dispatch(action); //将action传递给store
    }
    handleStoreChange(){
        this.setState(store.getState());//当store发生变化时，则调用此方法。用store中的数据替换当前组件的state数据。
    }
    handleButtonClick(){
        const action={
            type:'add_todo_item'
        }
        store.dispatch(action);
    }
}
export default Todolist;

6.使用Redux完成todolist的删除功能

  • 新增代码内容

    //[Todolist.js]
import React ,{Component} from 'react';
import 'antd/dist/antd.css';//antd是全局变量
import {Input,Button,List} from 'antd';
import store from './store/index' //也可以直接写成 import store from './store' 会默认直接找index.js

class Todolist extends Component{
    constructor(props) {
      super(props);
      //console.log(store.getState()); //store的方法，用于获取store中的数据
      this.state=store.getState();
      console.log(this.state);
      this.handleInputChange = this.handleInputChange.bind(this);
      this.handleStoreChange = this.handleStoreChange.bind(this);
      this.handleButtonClick = this.handleButtonClick.bind(this);
      store.subscribe(this.handleStoreChange);//将handleStoreChange函数订阅给store，每当store中的数据发生变化的时候将调用此函数
    }

    render(){
        return(
            <div style={{marginTop:'10px',marginLeft:"10px"}}>
                <div>
                    {/*输入框组件*/}
                    <Input placeholder="todoInfo" onChange={this.handleInputChange} style={{width:'300px',marginRight:'10px'}} value={this.state.inputValue}/>
                    {/*按钮组件*/}
                    <Button type="primary" onClick={this.handleButtonClick}>提交</Button>
                    {/*列表组件
                        header列表头
                        footer列表底
                        bordered列表有边框
                        dataSource列表渲染的数据资源
                        renderItem怎么渲染，dataSource中的每一个数据都会调用renderItem中的函数进行渲染，将每一条数据渲染成List.Item的组件，数据的内容就是dataSource中每一项数据的内容
                    */}
                    <List
                        header={<div>header</div>}
                        footer={<div>footer</div>}
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item,index)=>(<List.Item onClick={this.handleItemDelete.bind(this,index)}>{item}</List.Item>)}
                        style={{marginTop:'10px',width:'300px'}}
                    />
                </div>
            </div>
        )
    }
    handleInputChange(e){
        //创建action
        const action = {
            type:'change_input_value',//描述要做的事情
            value:e.target.value //表示改变inputvalue，变成e.target.value
        }
        store.dispatch(action); //将action传递给store
    }
    handleStoreChange(){
        this.setState(store.getState());//当store发生变化时，则调用此方法。用store中的数据替换当前组件的state数据。
    }
    handleButtonClick(){
        const action={
            type:'add_todo_item'
        }
        store.dispatch(action);
    }
    handleItemDelete(index){
        const action={
            type:'delete_todo_item',
            index:index
        }
        store.dispatch(action);
    }
}
export default Todolist;

//[store/index.js]
import {createStore} from 'redux'
import reducer from './reducer' //将笔记本引入进来
//创建数据的公共存储仓库
const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;

//[store/reducer.js]
const defaultState = {
    //当前store中有inputValue和list两条数据
    inputValue:'',
    list:[]
}
//reducer是笔记本，笔记本中存放关于图书馆书籍的数据和对数据的操作内容,state即是整个图书馆里书籍的信息(Store中的数据)
//reducer可以接受state，但是不能修改state
export default (state=defaultState,action)=>{
    console.log(state,action); //state表示上次的存储state，action表示用户传递过来的那句话
    if(action.type === 'change_input_value'){
        const newState = JSON.parse(JSON.stringify(state));//对之前的state做一个深拷贝
        newState.inputValue = action.value;
        return newState;
    }else if(action.type === 'add_todo_item'){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list = [...newState.list,newState.inputValue];
        newState.inputValue='';
        return newState;
    }else if(action.type === 'delete_todo_item'){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index,1);
        return newState;
    }
    return state;
}
    • 为<List.item>绑定点击的监听事件handleItemDelete()，传递下标index
    • 在handleItemDelete方法中创建action，并利用store的dispatch方法将action传递给store
    • store将直接到reducer中查询，在reducer中添加匹配的type值判断并给出根据下标的splice方法返回新的state给store
    • store将新的state返回给TodoList组件
    • 由于Todolist组件利用store.subscribe()方法订阅了store，故会调用对应的handleStoreChange()方法，并在方法中利用store.getState()重新获取state值完成当前组件的state更新，进而重新渲染页面

7.ActionTypes的拆分

  • 有时我们会将定义的action的type值与reducer中判断的type值写错，从而导致项目运行不起来，但却没有报错，故我们可以将type值提取出来成一个新的文件。

  • 示例代码：[下述代码将只针对源码中的修改进行介绍]

    //[store/actionTypes.js]
export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_TODO_ITEM = 'delete_todo_item';

//[Todolist.js]
//导入actionTypes.js文件
import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './store/actionTypes';
//使用常量值
handleInputChange(e){
    //创建action
    const action = {
        type:CHANGE_INPUT_VALUE,//描述要做的事情
        value:e.target.value //表示改变inputvalue，变成e.target.value
    }
    store.dispatch(action); //将action传递给store
}
handleButtonClick(){
    const action={
        type:ADD_TODO_ITEM,
    }
    store.dispatch(action);
}
handleItemDelete(index){
    const action={
        type:DELETE_TODO_ITEM,
        index:index
    }
    store.dispatch(action);
}

//[store/reducer.js]
import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './actionTypes';
const defaultState = {
    //当前store中有inputValue和list两条数据
    inputValue:'',
    list:[]
}
//reducer是笔记本，笔记本中存放关于图书馆书籍的数据和对数据的操作内容,state即是整个图书馆里书籍的信息(Store中的数据)
//reducer可以接受state，但是不能修改state
export default (state=defaultState,action)=>{
    console.log(state,action); //state表示上次的存储state，action表示用户传递过来的那句话
    if(action.type === CHANGE_INPUT_VALUE){
        const newState = JSON.parse(JSON.stringify(state));//对之前的state做一个深拷贝
        newState.inputValue = action.value;
        return newState;
    }else if(action.type === ADD_TODO_ITEM){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list = [...newState.list,newState.inputValue];
        newState.inputValue='';
        return newState;
    }else if(action.type === DELETE_TODO_ITEM){
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index,1);
        return newState;
    }
    return state;
}

8.使用actionCreator统一创建action

  • 将action的创建放到actionCreators.js进行统一管理，提高代码的可维护性

  • 示例代码：[下述代码将只针对源码中的修改进行介绍]

    //[store/actionCreators.js]
import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './actionTypes';
export const getInputChangeAction = (value) => ({
    type:CHANGE_INPUT_VALUE,
    value
})
export const getAddItemAction = () => ({
    type:ADD_TODO_ITEM
})
export const getDeleteItemAction = (index) => ({
    type:DELETE_TODO_ITEM,
    index
})

//[Todolist.js]
//引入actionCreators.js
import {getInputChangeAction,getAddItemAction,getDeleteItemAction} from './store/actionCreators'
//直接调用actionCreators.js中的方法创建action并传递给store
handleInputChange(e){
    //创建action
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action); //将action传递给store
}
handleButtonClick(){
    const action = getAddItemAction();
    store.dispatch(action);
}
handleItemDelete(index){
    const action=getDeleteItemAction(index);
    store.dispatch(action);
}

9.Redux知识点复习补充

  • Redux在设计和使用时有三个基本原则
    • store是唯一的【上述代码中我们在store/index.js中定义，所有组件均使用这一个store】
    • 只有store能够改变自己的内容【上述代码中，reducer拿到之前的数据并生成新的数据，将新的数据返回给store，store拿到新的数据并更新】
    • Reducer必须是纯函数（什么是纯函数？给定固定的输入，就一定有固定的输出，而且不会有任何副作用——副作用指的是对参数的修改）【上述代码中reducer导出的是函数，且给定了具体的state和action，一定有固定的输出内容，且在函数内部不会修改参数的值】
  • Redux中核心的API
    • createStore：创建store
    • store.dispatch：派发action给store
    • store.getState：获得store中所有的数据内容
    • store.subscribe：订阅store的改变，只要store发生改变，store.subscribe函数接收的回调函数就会被执行
汪喆_Jack
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Redux 学习系列（一） —— 基础概念入门篇
且听风吟的博客
05-05 1038
`Redux` 是一个可预测的 `JavaScript` 应用状态管理容器，也可以说是一个应用数据流框架。
redux-saga入门
webchang的博客
03-16 3474
redux-saga的介绍、API、使用案例
React笔记（八）Redux
m0_74343097的博客
09-03 1638
为了方便使用，Redux 的作者封装了一个 React 专用的库，本文主要介绍它。React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。
React 中Redux结合React-Redux使用类组件版本(一)
最新发布
qqqqqqqq188的专栏
05-20 858
React-redux是一个redux的官方绑定react库，也是有三要素store,reducer,action 但是获取store中的数据与事件方法不一样，首先使用Provider标签将组件包裹起来，使store与组件对接，并且向store分发actions以更新数据，在组件中通过connect函数将组件与react对接，其中有两个参数一个是mapStatetoprops负责接收store中的数据，另一个是mapDispatchtoProps负责接收传递过来的的actions。
《一》Redux
花铛
01-05 435
基于 Redux V4。Redux 不是 Facebook 开发的，它是一个专门用于做状态管理的 JS 库，它的作用是集中式管理应用中多个组件共享的状态。Redux 和 React 并没有直接的关系，可以将 Redux 与 React、Vue 或任何其他类似的界面库一起使用。React 是在视图层解决了 DOM 的渲染问题（开发者编写 JSX，React 生成虚拟 DOM，最终渲染成真实 DOM），但是状态 State 依然是留给开发者自己来管理。
Redux使用教程【入门篇】
2301_76418831的博客
06-06 435
Redux还提供了一些高级特性，如中间件（middleware）和组件连接（connect）等，用于处理异步操作和在React组件中使用Redux。请注意，Redux的学习曲线较陡，需要一些时间和实践来理解其思想和模式。创建Redux Store：创建一个Redux store来管理应用程序的状态。Store是一个包含所有状态的对象。Redux是一个用于JavaScript应用程序状态管理的可预测状态容器。订阅状态变化：可以使用subscribe方法订阅状态的变化，以便在状态更新时做出响应。
react-redux入门版-你想了解的这里都有
promise466的博客
04-08 327
Redux是一个用于管理JavaScript应用程序状态的工具集，旨在帮助管理随着应用程序规模增长而变得越来越复杂的状态。Redux强制使用一种单向数据流模式，让状态更容易管理和调试。Redux的核心包括store、action、reducer和middleware。
Redux入门学习
yleave的博客
01-21 241
文章目录基本概念三大原则使用 Redux 最简单的示例：计数器梳理使用 react-redux 的示例：计数器梳理使用 combineReducers 合并 reducer中间件自定义中间件使用第三方中间件异步中间件使用 redux-thunk 的示例Redux 示例优化Redux 调试工具REF Demo 仓库：https://github.com/yleave/redux-demo 基本概念   有几个图片可以帮助理解 redux:   这张图片说明了 reudx 的作用：组件间的信息传递不用再只能通过
Redux入门基础教程
08-10
下面将详细介绍 Redux 的入门基础知识。 **一、Redux 基本概念** 1. **Store**: Store 是 Redux 应用的核心，它持有应用的所有状态。你可以通过 `createStore` 函数创建 store，同时 store 提供了 `subscribe`、`...
react redux入门示例
08-27
React Redux入门示例 React Redux是一个流行的前端状态管理框架，用于管理React应用程序中的状态。下面是React Redux入门示例的知识点总结： 一、环境准备 在使用React Redux之前，需要先准备好环境。这里使用...
learn-redux:Redux入门
05-18
学习Redux Redux提供了一个可靠，稳定和成熟的解决方案来管理您的React应用程序中的状态。 通过少数一些有用的小模式，Redux可以将您的应用程序从一团混乱和分散的状态转变为一个令人愉快的，易于理解的现代...
Redux入门实战——todo-list2.0实现.7z
08-11
在`Redux入门实战——todo-list2.0实现`的压缩包中，你可能会找到以下文件： - `index.js`: 应用入口，包含`Provider`组件和应用根组件。 - `App.js`: 主应用组件，可能包含了`TodoList`和`TodoForm`等子组件。 - `...
redux入门详解
Dax1_的博客
08-31 534
redux是一个专门用于做状态管理的js库它可以用于原生js，react，vue，angular等项目中，但基本与react配合使用作用：集中式管理react应用中多个组件共享的状态。
Redux的详细配置和使用
u014409941的博客
04-14 146
Redux详细配置和使用
reactjs教程：安装Redux库及Redux入门示例
学亮编程手记
12-02 431
以上示例展示了Redux的基本工作流程。通过定义初始状态、动作类型和Reducer函数，创建Redux store，并使用。方法订阅状态的变化。这样，Redux就可以管理应用程序的状态，并提供可预测和可控制的数据流。方法派发动作来更新状态。方法可以获取当前状态，并通过。
redux的介绍、安装、三大核心与执行流程
Gik99的博客
08-19 395
redux的介绍、安装、三大核心与执行流程
React-Redux详解
虎哥LoveDroid
04-23 5329
React-Redux是一个用于在React应用中管理状态的第三方库。它是基于Redux架构的，提供了一种在React应用中高效管理状态的方式。React-Redux通过将Redux的核心概念和React组件相结合，使得在React应用中使用Redux变得更加简单和方便。React-Redux是一个用于在React应用中管理状态的第三方库。它是基于Redux架构的，提供了一种在React应用中高效管理状态的方式。
REACT Redux 入门
alokka的博客
09-24 682
①：store必须是唯一的②：只有store可以改变自己的内容③：reducer 必须是纯函数只有store能改变自己内容说明在reducer里我们不能直接操作state,只能通过定义新变量copy state的值，然后对新变量进行操作并 return 出新变量，不允许直接改变state。什么是纯函数？给固定的输入，就一定会有固定的输出，并且不会有任何副作用。所以对于异步函数（定时器、ajax数据请求等）、动态时间都不适意在reducer里订阅。
React & Redux 入门教程：快速启动与开发工具
"React & Redux 入门教程，一个完整的示例带快速入门。" 这篇教程是关于React和Redux框架的初级指南，旨在帮助初学者理解这两个JavaScript库的基础知识，并提供了一个可运行的示例项目来加速学习过程。React是由...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值