![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 55
BYE&
这个作者很懒,什么都没留下…
展开
-
React的调和过程(Reconcilliation)
Reconciliation 是实现UI更新的一个过程。目的就是在用户无感知的情况下降数据的更新体现到UI上。触发调和的方式ReactDom.render() 函数 和 ReactNativeRender.render()函数setState()函数forceUpdate()函数的调用comopnentWillMount 和 componentWillReceiveProp 中直接修改了state(地址)hooks中的useReducer 和 useState 返回的钩子函数virtual转载 2020-10-05 19:22:33 · 976 阅读 · 0 评论 -
react的理解
react的简单在于,它的核心API其实非常少。所以我们会看到很多地方在说react其实是一个UI库,并不是一个完整的框架,他告诉我们如何创建组件以及如何进行数据传递。甚至于创建组件的方式正是使用ES6的class语法因此在开发中react的使用对于ES6的语法依赖非常高。因此react自身本来就没有多少强限制的语法。我们只需要掌握组件里的props,state,ref,生命周期,就好像没有过多的额外知识,如果想要在jsx模板来遍历渲染,还得使用原生的map方法。而react的告诫组件,理解之后发现,其实原创 2020-10-04 23:03:28 · 523 阅读 · 0 评论 -
React Component 和 Element
React 和React Element到底是什么?React 是一个构建视图层的类库。不管React本身如何复杂,不管其他生态多么庞大,构建视图始终是他的核心。React Element简单的说,React Element 描述了“你想”在屏幕上看到的事物。抽象的说,React Element 元素是一个描述了Dom Node的对象。因为 React Element并不是你在屏幕上看见的真实事物。相反的它是一个描述真实事物的集合。Javascript 对象很轻量。用对象来作为 React E转载 2020-10-04 21:00:46 · 1089 阅读 · 0 评论 -
setState简易理解
setState,这个问题来源于一个疑惑,在使用redux的时候dispath一个action,为什么可以导致视图的更新?猜想是store改变后,redux在某处调用了setState,通知了react原创 2020-09-28 18:20:41 · 698 阅读 · 0 评论 -
入门React的内部机制(render->JSX->createElement->virtualDom))
JSX的原理我们常常吧这个叫做 “转译”,其实用“汇编”来描述更为正确。React官方推荐使用一种混合HTML和javascript的语法,即JSX来编写自己的组件。但浏览器对JSX及其语法并不理解。浏览器只理解Javascript ,所以JSX必须转化为javascript。下面是JSX的代码,一个与class和一些内容的div<div className="cn"> Content!</div>//转化为javascript只需要调用以下函数React.creat转载 2020-09-27 18:46:16 · 187 阅读 · 0 评论 -
react 对 diffing 算法应用的准备
React 提供的声明式 API 让开发者可以在对 React 的底层实现没有具体了解的情况下编写应用.在开发者编写应用时虽然保持相对简单的心智,但开发者无法了解内部的实现机制.本文描述了在实现 React 的 “diffing” 算法中我们做出的设计决策以保证组件满足更新具有课预测性,以及在复杂业务下依然保持应用的高性能性.设计动力在某一时间节点调用 React 的 render() 方法,...原创 2020-09-27 18:43:10 · 102 阅读 · 0 评论 -
Portals (react)
Portal 提供了一种将子节点渲染到存在于父节点以外的 DOM 节点的优秀的方案。ReactDOM.createPortal(child,container)第一个参数 child 是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment 第二个参数是一个 DOM 元素 。用法通常来讲,当你从组件的 render 方法返回一个元素时,该元素将被挂载到 DOM 节点...原创 2019-12-29 13:16:31 · 217 阅读 · 0 评论 -
深入 JSX(React)
JSX仅仅只是 React.createElement(component,porps,...children)函数的语法糖。<MyButton color="blue" shadowSize={2}> Click Me</MyButton>会编译为:React.createElement( MyButton, {color:'blue',shadowSiz...原创 2019-12-28 17:34:27 · 149 阅读 · 0 评论 -
高阶组件(React)
高阶组件高阶组件 (HOC) 是 React 中用于复用组件逻辑的一种高级技巧。HOC自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。具体来说,告诫在徐建是参数为组件,返回值为新组件的函数。const EnhancedComponent = higherOrderComponent(WrappedComponent);组件是将 props 转化...原创 2019-12-23 18:51:03 · 143 阅读 · 0 评论 -
Fragments ( React )
原来写组件必须有一个div包着,但是组件 过多就会对渲染造成无形的负担所以用这个FragmentsFragmentsReact 中的一个常见模式时一个和组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。render() { return ( <React.Fragment> <ChildA /> <Chi...原创 2019-12-21 17:26:58 · 97 阅读 · 0 评论 -
Refs 转发 (react)
Refs转发Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说,这通常不是必需的。但其对某些组件,尤其是可重用的组件库是很有用的。最常见的案例如下所述。转发 refs 到 DOM 组件考虑这个渲染原生 DOM 元素 button 的 FancyButton 组件:function FancyButton(porps) { return ( ...原创 2019-12-21 15:35:20 · 243 阅读 · 0 评论 -
Refs & DOM (React)
Refs 提供了一种方式,允许我们访问DOM节点火灾render 方法中创建的React原创 2019-12-21 15:31:12 · 140 阅读 · 0 评论 -
错误边界(React)
错误边界部分 UI 的 javascript 错误不应该导致整个应用崩溃,为了解决这个问题,React 16 引入了一个新的概念 – 错误边界。错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 javascript 错误,并且,它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。错误边界在渲染期间,生命周期方法和整个组件树的构造函数中捕获错误。注意错误边...原创 2019-12-18 22:30:42 · 360 阅读 · 0 评论