React study

最新推荐文章于 2024-04-24 09:31:45 发布
最新推荐文章于 2024-04-24 09:31:45 发布
阅读量146 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26074053/article/details/103379164
本文深入探讨React结合React Router实现的导航功能，展示了如何利用React Hooks更新状态，以及通过Redux进行状态管理的完整示例，包括自定义中间件的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

react

路由

import React from 'react'
import {HashRouter  , Route, Link  } from "react-router-dom"

class App extends React.Component {

    render() {
        return (
            <HashRouter> 
             {/* 这个div必须有  */}
                <div> 
                   <Link to="/A">A</Link>
                   <Link to="/B">B</Link>
                    <div>
                        <Route exact path="/A" component={ ()=>{return <div>click A</div>} }/>
                        <Route path="/B" component={()=>{return <div>click B</div>} } />
                    </div>
                </div>   
            </HashRouter>
        );
    }
}

export default App;

ReactHooks

https://jspang.com/posts/2019/08/12/react-hooks.html

import React,{useState} from 'react'

function ExampleHook() {
        const [count,setCount]=useState(0)
        return (
            <div>
                ---{count}--
                <button onClick={()=>{setCount(count+1)}}>gggggg</button>
            </div>
        );
}

export default ExampleHook;

Redux简单demo

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'  //  引入createStore方法
import { Provider,connect } from 'react-redux'


const defalutState = {
    inputValue : 'test01',
    list :[]
}

const reducer=(state = defalutState,action) =>{
    if(action.type === 'change_input'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    //----关键代码------start---------
    if(action.type === 'add_item'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    //----关键代码------end---------
    return state
}

const store = createStore(reducer); // 创建数据存储仓库


const TodoList =(props)=>{
    let {inputValue ,inputChange,clickButton,list} = props; // 粘贴过来后，此处要进行修改
    return (
        <div>
            <div>
                <input value={inputValue} onChange={inputChange} />
                <button onClick={clickButton}>提交</button>
            </div>
            <ul>
                {
                    list.map((item,index)=>{
                        return (<li key={index}>{item}</li>)
                    })
                }
            </ul>
        </div>
    );
}

const stateToProps = (state)=>{
    return {
        inputValue : state.inputValue,
        list:state.list
    }
}
const dispatchToProps = (dispatch) =>{
    return {
        inputChange(e){
            let action = {
                type:'change_input',
                value:e.target.value
            }
            dispatch(action)
        },
        clickButton(){
            let action = {
                type:'add_item'
            }
            dispatch(action)
        }
    }
}

const CtodoList= connect(stateToProps,dispatchToProps)(TodoList)

const App = (
   <Provider store={store}>
       <CtodoList />
   </Provider>
)
//---------关键代码--------end
ReactDOM.render(App, document.getElementById('root'));

redux自定义中间件与connect函数

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore , applyMiddleware ,compose } from 'redux'  //  引入createStore方法
//import thunk from 'redux-thunk'
import { Provider,connect } from 'react-redux'

const defalutState = {
    inputValue : 'test01',
    list :[]
}

const reducer=(state = defalutState,action) =>{
    if(action.type === 'change_input'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    //----关键代码------start---------
    if(action.type === 'add_item'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    //----关键代码------end---------
    return state
}




const myMiddleware = (store) => (next) => (action) => {
    console.log('进入了我自己定义的中间件');
    let result = next(action);    // 执行下一步
    // let result = store.dispatch(action); //不调用next，直接使用store.dispatch调用原生。然后是不行的，会陷入dispatch死循环。
    return result;
}

//

const store = createStore(reducer,applyMiddleware(myMiddleware)); // 创建数据存储仓库


const TodoList =(props)=>{
    let {inputValue ,inputChange,clickButton,list} = props; // 粘贴过来后，此处要进行修改
    return (
        <div>
            <div>
                <input value={inputValue} onChange={inputChange} />
                <button onClick={clickButton}>提交</button>
            </div>
            <ul>
                {
                    list.map((item,index)=>{
                        return (<li key={index}>{item}</li>)
                    })
                }
            </ul>
        </div>
    );
}

const stateToProps = (state)=>{
    return {
        inputValue : state.inputValue,
        list:state.list
    }
}
const dispatchToProps = (dispatch) =>{
    return {
        inputChange(e){
            let action = {
                type:'change_input',
                value:e.target.value
            }
            dispatch(action)
        },
        clickButton(){
            let action = {
                type:'add_item'
            }
            dispatch(action)
        }
    }
}

const CtodoList= connect(stateToProps,dispatchToProps)(TodoList)

const App = (
   <Provider store={store}>
       <CtodoList />
   </Provider>
)
//---------关键代码--------end
ReactDOM.render(App, document.getElementById('root'));

redux-thunk的源码非常简洁，要理解它需要看最后一部分

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

Redux实现细节

https://minglie.github.io/html/reactDemo/React-Redux-connect/index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <!--<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>-->


</head>

<body>

<div id="example" class="example"></div>

</body>
</html>










<script  type="text/babel">
    //返回函数集 functions 组合后的复合函数, 也就是一个函数执行完之后把返回的结果再作为参数赋给下一个函数来执行.
    const compose = (...func) => (...init) => {
        let result;
        switch (func.length) {
            case 0:
                result = func; break;
            case 1:
                result = func[0](...init); break;
            default:
                result = func.reduce((x, y) => {
                    return typeof x === 'function' ? y(x(...init)) : y(x);
                }); break;
        }
        return result;
    }


    //添加中间件
    function applyMiddleware(...middlewares) {
        return createStore => (reducer, preloadedState, enhancer) => {
            const store = createStore(reducer, preloadedState, enhancer)
            let dispatch = store.dispatch
            let chain = [] //用于存放中间件
            const middlewareAPI = {
                getState: store.getState,
                dispatch: (action) => store.dispatch(action)
            }
            chain = middlewares.map(middleware => middleware(middlewareAPI))
            dispatch = compose(...chain)(store.dispatch)
            return {
                ...store,
                dispatch
            }
        }
    }
    //Redux核心代码
    const Redux={
        currentReducer:{},
        currentState:{},
        currentListeners:{},
        createStore: function createStore(reducer, preloadedState, enhancer) {
            // 如果 preloadedState类型是function，enhancer类型是undefined，那认为用
            // 户没有传入preloadedState，就将preloadedState的值传给
            // enhancer，preloadedState值设置为undefined
            if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
                enhancer = preloadedState
                preloadedState = undefined
            }
            // enhancer类型必须是一个function
            if (typeof enhancer !== 'undefined') {
                if (typeof enhancer !== 'function') {
                    throw new Error('Expected the enhancer to be a function.')
                }
                // 返回使用enhancer增强后的store
                return enhancer(Redux.createStore)(reducer, preloadedState)
            }
            // reducer必须是一个function
            if (typeof reducer !== 'function') {
                throw new Error('Expected the reducer to be a function.')
            }
            Redux.currentState=reducer(preloadedState,{type:0});
            Redux.currentReducer = reducer;
            Redux.currentListeners = [];
            let isDispatching = false


            function dispatch(action) {
                if (typeof action.type === 'undefined') {
                    throw new Error(
                        'Actions may not have an undefined "type" property. ' +
                        'Have you misspelled a constant?'
                    )
                }
                // reducer内部不允许再次调用dispatch，否则抛出异常
                if (isDispatching) {
                    throw new Error('Reducers may not dispatch actions.')
                }
                try {
                    isDispatching = true
                    Redux.currentState = Redux.currentReducer(Redux.currentState, action);
                } finally {
                    isDispatching = false
                }
                var listeners = Redux.currentListeners;
                for (var i = 0; i < listeners.length; i++) {
                    var listener = listeners[i];
                    listener();
                }
                return action;
            }


            function subscribe(listener) {
                Redux.currentListeners.push(listener);
            }
            function getState() {
                return Redux.currentState;
            }
            return{
                dispatch, subscribe, getState
            }
        }
    };
    //redux 中间件例子
    const myMiddleware = (store) => (next) => (action) => {
        console.log('进入了我自己定义的中间件');
        let result = next(action);    // 执行下一步
        // let result = store.dispatch(action); //不调用next，直接使用store.dispatch调用原生。然后是不行的，会陷入dispatch死循环。
        return result;
    }

    ////////////////下面两个是action/////////////////////////////////////////
    const increment = (num)=> {
        return {
            type: 'INCREMENT_COUNTER',
            num:num
        }
    };
    const decrement = ()=> {
        return {type: 'DECREMENT_COUNTER'}
    };

    const actions={
        increment,
        decrement
    };
    //定义一个计数reduce,用于创建store
    const counterReduce= (defaultState={count: 10}, action)=> {
        console.log("进入reducer 状态：",defaultState);
        switch (action.type) {
            case 'INCREMENT_COUNTER':
                return {
                    count: defaultState.count+action.num
                };
            case 'DECREMENT_COUNTER':
                return {
                    count: defaultState.count-1
                };
            default:
                return defaultState;
        }
    };

    //创建全局唯一store
    let store =  Redux.createStore(counterReduce,applyMiddleware(myMiddleware));


   //connect是一个高阶组件(输入输出都是组件的函数)
    // 1，接受一个组件，把数据放到组件内部，返回一个组件
    // 2，数据发生变化的时候，通知到组件
    const connect =(mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
        class Connect extends React.Component {
            constructor () {
                super();
                this.state = {
                    allProps: {}
                }
            }
            componentWillMount () {
                this._updateProps();
                store.subscribe(() => this._updateProps())
            }
            _updateProps () {
                let stateProps = mapStateToProps ? mapStateToProps(store.getState(), this.props):{}; // 防止 mapStateToProps 没有传入
                let dispatchProps = mapDispatchToProps ? mapDispatchToProps(store.dispatch, this.props):{}; // 防止 mapDispatchToProps 没有传入
                this.setState({
                    allProps: {
                        ...stateProps,
                        ...dispatchProps,
                        ...this.props
                    }
                })
            }
            render () {
                return <WrappedComponent {...this.state.allProps} />
            }
        }
        return Connect
    };

   //测试用的计数组件
    class Counter extends React.Component {
        render() {
            //从组件的props属性中导入四个方法和一个变量
            const {increment, decrement, counter} = this.props;
            //渲染组件，包括一个数字，四个按钮
            return(
                    <div>
                        Clicked: {counter} times
                        <button onClick={()=>{increment(3)}}>+</button>
                        {' '}
                        <button onClick={decrement}>-</button>
                        {' '}
                    </div>
            )
        }
    }
    //将state.counter绑定到props的counter
    //这个函数允许我们将 store 中的数据作为 props 绑定到组件上。
    const mapStateToProps = (state) => {
        return {
            counter: state.count
        }
    };

    //它的功能是，将 触发action的函数 作为props 绑定到组件上,
    const mapDispatchToProps = (dispatch, ownProps) => {
        return {
            increment: (...args) => dispatch(actions.increment(...args)),
            decrement: (...args) => dispatch(actions.decrement(...args))
        }
    };
    //Counter 经过 connect 加强得到 App
    const App=connect(mapStateToProps, mapDispatchToProps)(Counter);
</script>



<script type="text/babel">
    ReactDOM.render(
            <div>
                <App />
            </div>,
        document.getElementById('example')
    );
</script>
react-study:React研究
05-22
哇，这是我的第一个React项目！ 用React制作电影网！！ 目前未更新
react-study:这是研究React的仓库。
04-29
React研究 这是研究React的仓库。
React Study
xinshiku的博客
12-14 375
学习VS Code其实还可以学习到很多其它的东西： github这个词应该分开。 git：早年Torvalds 为linux 源代码做的分布式版本控制系统。 hub：中心的意思。 github：GitHub以托管各种git库，并提供一个web网站，创立于2012年. Git学习的视频教程： http://www.icoolxue.com/album/show/41
React study(一)
EatgirlHui_Unique的专栏
11-16 933
目录 react的产生 react特点 发展历程 JSX语法及特点介绍 JSX语法 非DOM属性介绍 JSX解释器架构介绍目录react的产生facebook需要解决的问题：构建数据不断变化的大型应用。 react特点react特点： 简单 、 声明式 react核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。 提高代码复用率：组件将数据和逻辑封装，类似
React study(二)
EatgirlHui_Unique的专栏
11-16 869
目录目录 react 组件生命周期概要 不同阶段的自定义函数 react 组件生命周期 生命周期的初始化阶段 生命周期的运行中阶段 生命周期的销毁阶段 属性的含义和用法 项目分析react 组件生命周期概要组件本质上是状态机，输入确定，输出一定确定。 状态发生转换时会触发不同钩子函数，从而让开发者有机会作出响应。可以用事件的思路来理解状态。react整个生命周期： 不同阶段的自定义函数初始化：
react study.zip
01-12
React是Facebook推出的一款开源JavaScript库，用于构建用户界面，尤其是单页应用（SPA）。它采用组件化开发方式，使得UI代码可复用性高且易于维护。本React学习资料包包含"react全家桶资料.zip"和"源码.zip"两个子...
study-react:react源码学习，框架构建，链接到react源码，react17版本
03-23
标题“study-react:react源码学习，框架构建，链接到react源码，react17版本”表明我们将关注React 17的源码分析。React 17是一个重要的更新，主要集中在改进React与其他库的集成，减少迁移成本，并引入一些内部优化...
study_Ignite_React:study_Ignite_React
03-10
标题 "study_Ignite_React:study_Ignite_React" 暗示这是一个关于学习Ignite React的项目。Ignite React通常指的是Ignite UI for React，它是一个UI组件库，用于构建高性能、响应式的React应用程序。Ignite UI提供了...
react-study:这是一个用于学习React的React项目
05-17
React研究 这是一个学习项目的React项目 第一的 npm安装 第二 npm start或npm run serve：dist ps 如果要在线查看此演示页面，请单击此处
【Study】React
Spring-_-Bear 的 CSDN 博客
09-03 564
React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。
探索React学习新境界：React-Study项目深度解析
gitblog_00031的博客
04-16 288
探索React学习新境界：React-Study项目深度解析 项目简介 是一个专门为React初学者和进阶者打造的学习资源库。该项目由minooo维护，它不仅包含了一套完整的React基础知识教程，还包括了各种实战项目的源码，帮助开发者深入理解React的工作原理，并提升实际开发技能。 技术分析 React是Facebook推出的用于构建用户界面的JavaScript库，以其组件化思维和Virtu...
探索React学习神器：react-study-admin
gitblog_00028的博客
04-24 274
探索React学习神器：react-study-admin 去发现同类优质开源项目:https://gitcode.com/ 在前端开发的世界里，React以其强大的功能和高效的性能，成为了开发者们的首选框架之一。今天，我们有幸向大家推荐一个旨在帮助React初学者和进阶者提升技能的开源项目——。该项目不仅提供了完整的后台管理系统模板，还有丰富的教程和实践案例，让学习React变得更加轻松。 项目...
【遥感影像处理】基于Google Earth Engine的S-2影像NDVI计算与时间序列分析：2023年秋季植被指数监测系统实现
08-02
内容概要：本文档展示了如何利用Google Earth Engine (GEE) 平台对Sentinel-2卫星图像进行处理与分析。首先创建了2023年9月至10月期间的S-2影像集合，并基于划定的研究区域（aoi）进行了筛选。接着定义了去除云层影响以及计算归一化植被指数（NDVI）的函数，将NDVI作为新波段加入到影像集中。随后提取NDVI数据并构建了中位数值合成图，设置了用于显示NDVI的色彩渐变条。最后，生成了NDVI的时间序列折线图，并将最终结果导出到Google Drive，同时在地图上展示了NDVI的分布情况。 适合人群：具有遥感基础知识、对植被监测感兴趣的科研人员或学生，以及从事地理信息系统工作的专业人士。 使用场景及目标：①研究特定时间段内的植被生长状况变化；②评估不同地区植被覆盖度差异；③为农业、林业等领域提供科学依据和支持。 阅读建议：读者应具备一定的JavaScript编程基础，熟悉Google Earth Engine平台操作，以便更好地理解和应用文中提供的代码示例。由于涉及到具体的地理空间分析任务，建议结合实际案例进行练习，以加深理解。
Java实现HTML转图片功能的jar包
08-02
资源下载链接为： https://pan.quark.cn/s/1bfadf00ae14 在Java开发中，存在一种功能强大的jar包，它能够高效地将HTML页面转换为图片。这种jar包非常适合用于各种截图场景，例如将网页内容生成图片用于展示、存档或者分享等。它能够精准地渲染HTML页面，确保生成的图片完整且清晰地呈现页面的布局和内容。无论是简单的文本页面，还是包含复杂样式、图片、表格等元素的页面，都能很好地处理。开发者可以轻松地将其集成到自己的Java项目中，通过简单的代码调用，即可实现HTML到图片的转换功能，极大地提高了开发效率，满足了多种业务需求，比如网页截图、报表生成图片等场景。
sqlite-jdbc-3.44.0.0.jar中文文档.zip
08-02
1、压缩文件中包含： 中文文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
ingress 1.13
08-02
ingress 1.13
【配送路径规划】基于matlab遗传算法GA求解面包输送路线规划【含Matlab源码 13837期】.zip
最新发布
08-02
Matlab领域上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
ssquant-ai-AI人工智能资源
08-02
AIQuant
一款在微信小程序上玩的滑块拼图游戏
08-02
资源下载链接为： https://pan.quark.cn/s/b5ab6dfec39b 一款在微信小程序上玩的滑块拼图游戏（最新、最全版本！打开链接下载即可用！）
React全家桶资料学习包
根据给定文件信息，标题为"react study.zip"、描述为"react学习"、标签为"react"以及压缩包内文件名称列表"react全家桶资料.zip"和"源码.zip"，我们可以生成以下相关知识点： 1. React框架简介 React是由Facebook...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值