react
文章平均质量分 75
前端阿龙
希望做好身边的小事
展开
-
React - Hooks
Hooks介绍React Hooks 是用来做什么的?对函数型组件进行增强,让函数型组件可以存储状态,可以拥有处理副作用的能力,让开发者在不使用类组件的情况下,实现相同功能。什么是副作用?副作用指在一个组件中只要不是把数据转换为视图的代码就属于副作用,例如获取dom元素、对dom元素添加数据、获取ajax请求这些都属于副作用,在类组件当中我们通常使用生命周期函数来处理这些副作用,在函数型组件中我们使用hooks来处理这些副作用。类组件的不足(Hooks要解决的问题)缺少逻辑复用机原创 2022-05-30 10:34:24 · 161 阅读 · 0 评论 -
React源码四 - render阶段
概述要将react代码渲染到页面中需要经过两个阶段,render阶段和commit阶段。render阶段是协调总负责的阶段,在这个阶段要为每一个react元素构建所对应的fiber对象,构建fiber对象的过程中还要为此fiber对象创建对应的dom对象,并且还要为fiber对象添加effectTag属性,标注当前fiber对象对应的dom对象要进行什么样的操作,是插入还是删除还是更新。这个新构建的fiber对象我们称之为workInProgress fiber树 也就是待提交的fiber树,当re原创 2022-05-22 23:21:43 · 535 阅读 · 0 评论 -
React源码二 - React16版本架构
React 16版本架构可以分为三层:调度层、协调层、渲染层Scheduler(调度层):调度任务的优先级,高优任务优先进入协调器Reconciler(协调层):构建fiber数据结构,对比fiber对象找出差异,记录fiber对象要进行的DOM操作Renderer(渲染层):负责将发生变化的部分渲染到页面上scheduler 调度层在React 15的版本中,采用了循环加递归的方式进行了virtualDom的比对,由于递归使用js自身执行栈,一旦使用就无法停止,直到任务执行完成。如果vi.原创 2022-05-22 10:24:30 · 566 阅读 · 0 评论 -
React源码三 - jsx转换为ReactElement的过程
创建react元素jsx被Babel编译为React createElement方法在调用后返回的就是ReactElement,就是vitualDom。createElement文件位置:packages/react/src/ReactElement.js/** 创建 React Element type 元素类型 config 配置属性 包含props属性和特殊属性 children 子元素 1. 分离props属性和特殊属性 2. 将子元素挂载到props.children中原创 2022-05-22 09:42:31 · 530 阅读 · 0 评论 -
React概略
react中为何用bind因为react事件中this默认是undefined最好在 constructor中写 修改方法的this指向 不要在 render中的dom上写 因为bind是返回一个新的函数 如果在dom上写 点击一次执行一次bind返回一次新的函数 而如果在constructor中写的话 只有组件初始化的时候返回一次就行了 例如 render dom 中 onClick = ...原创 2020-03-22 19:23:59 · 232 阅读 · 1 评论 -
react 路由配置
react router 4.0 要安装 react-router-dom 是基于pc端的路由插件详细教程请看官网 reacttraining.cn打不开的话直接百度进入链接 以下谨记载自己所学4.0版本中已经不需要路由配置文件 一切皆为组件 可以放在任意组件中配置 当然如果配置在文件中本人感觉还是比较清晰的 仅代表个人观点react-router 和 react-router-dom的理...原创 2019-06-23 22:46:17 · 665 阅读 · 1 评论 -
redux集成开发
redux使用场景及基本介绍首先主页 redux 并不是只为react框架服务单向数据流:从父组件流向子组件,兄弟组件无法共享数据state:react中的状态,是只读对象,不可直接修改reducer: 基本函数,用于对state的业务处理action:普通对象,用于描述事件行为 改变state由上图可以看出 redux的工作流程是首先 例如 点击事件触发action 然后redu...原创 2019-06-11 23:30:38 · 200 阅读 · 1 评论 -
react小书没读完的记录
react的生命周期constructor() 一般来说 所有关于组建自身的状态的初始化工作都会放在 constructor里面去做componentWillMount:组件挂在开始之前,也就是在组件调用render方法之前调用 进行组件的启动工作例如Ajax数据拉取 定时器的启动 组件从页面上销毁的时候componentDidMount:组件挂载完成以后,也就是DOM元素已经插入页面...原创 2019-04-07 21:48:11 · 339 阅读 · 0 评论 -
Vue对比React
两者的本质区别Vue本质是MVVM框架 由MVC发展而来React本质是前端组建化框架 由后端组件化发展而来Vue-使用模板(最初由angular提出)有指令React-使用JSX模板语法上更倾向于JSX模板分离上 更倾向于VueReact模板和js混在一起 未分离React本身就是组建化 没有组件化就不是Reactvue 也支持组件化 不过是在MVVM上的扩展模板和组件化的区...原创 2019-01-14 17:19:16 · 131 阅读 · 0 评论 -
JSX本质是什么
JSX语法举几个例子JSX中注释方式{/*需要注释的内容*/}HTML标签在里面也都支持可以在render中写判断{show ? <img src=".....">}//如果show这个变量存在显示图片 否则不显示在render中循环&am原创 2019-01-14 17:18:30 · 1820 阅读 · 0 评论 -
react组件化todolist实例
首先创建react的脚手架 具体创建步骤自己查首先创建一个todelist 在src下创建一个components文件夹 里面创建一个todo的文件夹 todo里面创建一个index.js文件 在里面写import React,{Component} from 'react'class Todo extends Component{ constructor(props){//每个cla...原创 2018-12-26 21:57:02 · 272 阅读 · 0 评论