随笔分类 - react
react数据流控制操作
摘要：1.mobx是一个轻量级的状态管理器，所以很简单(单一全局数据使用class)类有get 数据方法 我们需要把数据做成全局数据，并且这个数据不能污染全局数据 -- 应该是一个闭包(ES6 中class是一个语法糖，本身是一个函数) 所以应该定义一个类，然后导出一个实例（因为数据要全局通用，所以不能导
阅读全文
摘要：钩子函数使函数组件中拥有state和副作用（useEffect）。官方提供了两种state管理的hook:useState,useReducer。 1.react钩子函数 -- useContext 它是react的方法函数createContext()需要先提供数据来进行给以其他使用消费 //st
阅读全文
摘要：1.版本号使用 react：^17.0.2 react-dom:^17.0.2 react-redux:^7.2.6 redux:4 redux-thunk:^2.1.4 2.系统架构todolist案例架构 3.项目 1.实例入口：（配置中心、注册等等）-> 系统组件入口（页面分发中心） -> 2
阅读全文
摘要：1.Redux 基本使用 yarn add redux@4 2.Redux 异步请求 yarn add redux-thunk 3.Redux 跨组件传值 yarn add react-redux // store/index.js import {createStore,applyMiddlewa
阅读全文
摘要：1、Redux 原理 redux框架基于flux（flux是react专用的一个状态管理器）设计思想、设计模式来开发实现的一个js库，它不是react的专用 vuex也是基于flux原理来的一个库 redux 三大设计原则：数据源单一、state只读、纯函数修改 单一数据源原则 -- 全局只有一个，
阅读全文
摘要：1.HOC -- 高阶组件Hign order component 从函数式编程过来的一个概念，它源于HOF high order function 高阶函数 HOF高阶函数： - -就是一个函数接收一个算子函数，然后返回一个算子函数 HOC高阶组件 -- 就是一个函数接收一个组件，然后返回一个组件
阅读全文
摘要：1.调用createContext方法来创建一个Context对象 //createContext(defaultValue:any):React.Context //creactContext方法会执行以后会返回一个Context对象 //interface Context{ // Provide
阅读全文
摘要：->TS->VUE3/react-hooks -> webpack/rollup - nodejs->leader 1.生命周期 -- 只有类组件中才有 受控组件 - - 它的数据全部来源于props 三个阶段：挂载、更新、卸载 在挂载和更新，render方法是更新虚拟dom的必要生命周期，这个方法
阅读全文
摘要：1.页面节点获取 2.组件内部数据管理对象 -- state 在react中只有两种数据： 一个是组件内部数据 -- 称为state数据(当前组件的状态数据)，还有一个是组件外部数据 类组件的render方法只有这两种数据的更新会触发 定义state，在构造函数中必须先调用super()，名字必须是
阅读全文
摘要：一、函数组件没有this对象，也没有生命周期 hooks是在16.8以后才有的，也就是函数组件是后来添加的， 它的原理就是把类组件的render方法进行抽取实现的 函数组件与hooks 1.useState -- 定义一个state数据 useState为什么会在第二个参数是函数？因为react都是
阅读全文
摘要：一、类生命周期 1.在react中，生命周期只有类组件才有，函数组件没有生命周期 在现在开发过程中，以函数组件为主要开发，类组件几乎被抛弃，因为类组件不灵活，现在的编程偏向与 函数式编程 1.生命周期 -- 挂载 constructor -- 是用于初始化数据 ,不能在这里写setState()调用
阅读全文
摘要：1.在组件传值的时候，开发上会对数据类型进行检测，是否传递的需要数据，有这么一个库可以 使用它的属性特性来决定预料属性类型数据来进行控制和判断 在根据这些的定义检查传递给组件的props，不匹配就会在开发上发出警告 官方安装：npm install --save prop-types react安装
阅读全文
摘要：1.数据绑定语法：{} 定义一个数据，React中的所有绑定语法只有一个是单花括号：{}，没有指令，包括注释都是一个花括号 绑定语法一定得到一个结果，可以是一个方法赶回一个值 绑定对象的值也是直接{}单花括号语法 jsx的注释:{ /* */} =>单花括号里面是多行注释 一旦使用了{}语法。在语法
阅读全文
摘要：一、标签行内样式写法： <h2 style={{textAlign:"center",fontFamily:"黑体"}}>react</h1> //行内标签样式要用双括号，如遇见两个单词就要第二个单词首字母大写驼峰命名 二、内部声明样式写法 const a={ border:"1px solid b
阅读全文
摘要：一、react初之体验 a.理解React设计的核心思想 它是V（view 视图）框架，设计之初仅仅是不满意Boostrap的页面设计: 1.一切皆组件，最小化到一个元素 2.只有单向数据流 - - 数据可追溯，获取值和设置值都是一个方法 b.React开发特性 除了核心库之外，其它的所有库包括状态
阅读全文
摘要：1.react框架使用版本 node 14版本 react 17.0.2 craco 6.4.3版本 redux 4.1.2版本 react-redux 7.2.6版本 echarts 4版本 （5版本需要定义引入对象） react-router-dom 5坂本
阅读全文
摘要：/* * @Author: Qingshan_Chen * @Date: 2022-01-19 16:29:51 * @Description: 遍历模拟数据，使用函数组件 * @LastEditors: Qingshan_Chen * @LastEditTime: 2022-01-21 10:13
阅读全文
摘要：1.React设计的核心思想 一切皆是组件，最小可以化到一个元素 --在react开发中，所有都是基于组件开发和封装（因为react没有html、所有的东西都是js对象；在底层原理是 v层“框架”--仅仅用于视图的库 框架里的虚拟dom和diff算法-实现的视图数据驱动，由内部数据setState使
阅读全文
