react
文章平均质量分 58
react相关内容
大神乔伊
产品,技术,思考,成长
展开
-
react学习导航
前言浅蓝色的文字是超连接,点击前往相关主题学习资料官网基础hook 数据管理react-reduxdvamobx 框架uminext辅助开发mock数据其他跨域原创 2021-05-25 21:07:11 · 366 阅读 · 0 评论 -
umi学习导航
前言浅蓝色的文字是超连接,点击前往相关主题学习资料官网基础路由运行时配置 插件权限验证国际化ant-design-pro初始化数据管理原创 2021-05-22 01:35:50 · 710 阅读 · 0 评论 -
项目经验:react中使用typescript
前言如果你学会了,可以忽略本文章,或去项目经验地图寻找更多答案使用规则在 react 中使用 ts 的几点原则和变化:所有用到jsx语法的文件都需要以tsx后缀命名使用组件声明时的Component<P, S>泛型参数声明,来代替PropTypes!全局变量或者自定义的window对象属性,统一在项目根下的global.d.ts中进行声明定义对于项目中常用到的接口数据对象,在types/目录下定义好其结构化类型声明函数组件import React from 'react原创 2021-08-16 23:33:41 · 680 阅读 · 0 评论 -
项目经验:react创建项目
前言如果你学会了,可以忽略本文章,或去项目经验地图寻找更多答案创建项目的方式第一种:使用脚手架,创建react 或者 react + typescript第二种:使用webpack,创建react 或者 react + typescript第一种:使用脚手架,创建react 或者 react + typescript安装脚手架:npm i -g create-react-app || yarn add global create-react-app创建react项目npx c原创 2021-08-16 19:29:09 · 356 阅读 · 0 评论 -
react学习:JSX语法,虚拟DOM,DIFF算法
问题导向了解JSX语法,虚拟DOM是什么?DIFF算法如何算?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案JSX语法JSX语法是react中的核心,js语法的拓展,用它替代JS,本质上是一个createElement函数,用于生产虚拟DOM,webpack在打包时,会用babel将JSX变成createElement函数。语法规则遇到{}按照js语法解析遇到<>按照xml语法解析每一个列表元素需要指定一个key为唯一元素的索引,方便对比虚拟DOM原创 2021-08-01 06:54:48 · 159 阅读 · 0 评论 -
react学习:react简单理解
问题导向个人的react理解如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案React简介React是一个快速创建用户交互页面的前端视图层库框架,由FaceBook2011年推出,,它通常只做两件事:1.渲染视图,2.管理DOM,它的特点是JSX语法,虚拟DOM,响应式设计,组件式开发,函数式编程,单向数据流,数据驱动视图。公式数据驱动视图,条件决定逻辑/渲染UI = fn(state)特点响应式设计:数据一变动,页面也跟着变化(响应),只要关注数据即可原创 2021-08-01 06:31:23 · 144 阅读 · 0 评论 -
react学习:受控组件与非受控组件
问题导向受控组件与非受控组件是什么?如何使用?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案受控组件组件的变化受到this.setState的影响自身有state没有自己的state,所有的数据都来自props非受控组件组件的变化不会受到this.setState的影响,而是来自ref必须操作DOM时,setState实现不了,如文件上传,富文本编辑器可以调用子组件的方法,但子组件必须是类组件才可以注意使用非受控组件时input使用defau原创 2021-08-01 06:06:12 · 194 阅读 · 0 评论 -
react学习:组件设计
问题导向react的组件应该如何设计?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案组件设计关键点:数据驱动视图状态:数据结构设计(React-state, Vue-data)视图:组件结构与拆分数据结构设计用数据描述所有的内容,而非功能数据要结构化,易于程序操作(遍历、查找)数据要可扩展,以便增加新的功能如:React设计todolist(组件结构,redux,state数据结构)数据结构设计this.state = { list:[{原创 2021-08-01 05:05:37 · 359 阅读 · 0 评论 -
react学习:render props组件复用
问题导向render props是什么?有什么用?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案render props本质:render props 是一个用于告知组件需要渲染什么内容的函数作用:组件复用原理:被复用的组件不直接展示内容,而是由调用的组件决定如何渲染render是组件调用的名字而已,可以使用其他的名字官方例子鼠标获取的复用class Cat extends React.Component { render() { const原创 2021-07-25 14:36:31 · 109 阅读 · 0 评论 -
react学习:useReducer + useContext实现状态管理
问题导向如何使用useReducer + useContext实现简单的状态管理?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案注意阅读此文需要一定的redux知识第1步:入口页无需使用redux,使用function_component的hooksimport React from 'react'import ReactDOM from 'react-dom'import App from './App_useReducer'ReactDOM.rend原创 2021-06-01 20:48:17 · 1120 阅读 · 0 评论 -
react学习:状态管理redux和react-redux
问题导向react生命周期何时调用?以及应用场景?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案学习更多react学习地图原创 2021-05-29 02:04:01 · 203 阅读 · 1 评论 -
react学习:react-router路由
问题导向react生命周期何时调用?以及应用场景?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案学习更多react学习地图原创 2021-05-28 21:43:13 · 1449 阅读 · 2 评论 -
react学习:HOC高阶组件
问题导向高阶组件是什么?有什么用?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案高阶组件本质:是高阶函数,接收一个组件作为参数,返回一个被强化/或具有公共逻辑的组件.作用:组件拓展与强化,公共逻辑抽离基本使用例子说明:Show组件本身没有name属性,Hoc也没有传递,而是经过withName这个高阶组件强化后,它具备了name属性第一步:声明高阶组件:让接收到的组件获取name属性const withName = Comp => { cons原创 2021-05-26 09:01:39 · 104 阅读 · 0 评论 -
react学习:Portals
问题导向Portals是什么?如何使用?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案react组件的渲染方式(层级)组件默认会按照既定层级嵌套渲染,父组件,子组件react的作用范围:只在html中ID为root的节点中渲染内容,root节点就是react的根节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m原创 2021-05-26 08:37:15 · 169 阅读 · 0 评论 -
react学习:组件复合Composition
问题导向组件复合Composition?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案组件复合作用:组件拓展与复用,自定义组件的外观和行为如何使用:使用组件包裹内容,传递props.children,chilren可以是任意的JS表达式const App = (props) => { 传递button给组件 const footer = <button>具名插槽</button> 传递color属性原创 2021-05-26 08:04:23 · 257 阅读 · 0 评论 -
react学习:性能优化
问题导向react性能优化有哪些?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案性能优化的方式渲染列表时绑定key值合理使用异步组件/路由懒加载及时卸载不必要的事件使用不可变值,利于diff算法的判断在constructor绑定this/使用箭头函数shouldComponentUpdate/PrueComponent/Memo组件性能优化(更新渲染)问题:子组件重复渲染问题,性能优化对于React更加重要解决方式一:利用生命周期,对比虚拟DOM,旧原创 2021-05-26 07:51:55 · 128 阅读 · 0 评论 -
react学习:更新模式
问题导向react生命周期何时调用?以及应用场景?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案更新的两种方式保守式更新:会延迟,因为先请求服务器,后返回数据,再渲染视图,并且不确定请求服务是否成功乐观式更新:假设大部分时候服务器的请求都是成功的,先渲染视图,再请求服务器,并且监听失败,如果失败则回滚到原来的数据,这样的方式更快。一个删除的例子handleDelete = async post => { 第一步:保存原来的数据 const o原创 2021-05-26 07:40:15 · 237 阅读 · 0 评论 -
react学习:自定义hook
问题导向react自定义hook如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案自定义hook(封装)类型:函数作用:逻辑复用,本质是函数,可以多次调用语法:名称以use开头,函数内部可以调用其他的Hook简单例子一个获取年龄的自定义Hookimport {useState, useEffect} from 'react';function useAge(){ const [age, setAge] = useState(0) useEffec原创 2021-05-26 06:38:07 · 500 阅读 · 1 评论 -
react学习:hook
问题导向react生命周期何时调用?以及应用场景?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案学习更多react学习地图原创 2021-05-26 04:45:25 · 240 阅读 · 1 评论 -
react学习:生命周期
问题导向react生命周期何时调用?以及应用场景?如果你都有了答案,可以忽略本文章,或去react学习地图寻找更多答案生命周期在某一时刻,组件会自动调用执行的函数React V16.4之后的生命周期3 + 1阶段:挂载时,更新时,卸载时,以及错误时创建/挂载时:constructor()static getDerivedStateFromProps(props, state)render()componentDidMount()更新时:static getDerived原创 2021-05-25 22:04:22 · 137 阅读 · 0 评论 -
umi学习:dva状态管理
问题导向dva是什么?如何使用?如果你都有了答案,可以忽略本文章,或去umi学习地图寻找更多答案whatdva是基于react-redux和redux-sage的封装redux-sage用于在react-redux中处理异步函数,redux-sage则是基于generator的封装不会redux-sage没问题,要会一点generator,类型promise的async await,请搜索相关文章how如果是使用umi3的脚手架安装项目,无需安装任何东西即可使用在src →原创 2021-05-23 07:59:15 · 3944 阅读 · 0 评论 -
umi学习:路由
注意2.x版本和3.x版本是有一些区别的,这里使用的是3.x版本约定式路由重点: umi会根据src下pages的文件结构自动生成路由可以在src下.umi文件夹 → core → routes.ts 文件中查看如下目录自动生成路由:src → .umi → core → routes.tsconst routes = [ { "path": "/", "component": require('C:/Users/PC/Desktop/umi/src原创 2021-05-22 01:34:18 · 2683 阅读 · 2 评论 -
react使用mockjs模拟数据
react使用mockjs模拟数据废话少说,直接开始:mockjs简介生成随机数据,拦截 Ajax 请求注意:只能使用axios,fetch请求无法拦截官网:http://mockjs.com/mock数据方式第一种:在create-react-app项目中mock第一种:...原创 2021-02-25 16:14:09 · 6321 阅读 · 0 评论 -
react-17.x版本,解决跨域问题的多种方式
react最新版本解决跨域问题废话少说,直接上答案:react测试版本:17.x后端接口:http://127.0.0.1:9092/user注意:每种解决方式的请求路径有所不同方式一:在前端项目package.json中添加(有效)"proxy": "http://127.0.0.1:9092"前端请求写法:fetch(’/user’)实际请求接口:“http://127.0.0.1:9092/user”方式二:在前端项目package.json中添加(无效)(react新版本报原创 2021-02-25 12:29:59 · 1258 阅读 · 0 评论