![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
山河 山河
在探索全栈的路上举步维艰
展开
-
原生JS模拟实现React.createElement()
1、JSX语法渲染流程:使用jsx语法 => 调用React.createElement()函数 => 返回vNode(虚拟节点) => 渲染到页面上2、React.createElment(type|标签名,props|属性的对象集合,children..|各种节点)const React = { createElement(type, props, ...c...原创 2019-08-24 18:14:59 · 678 阅读 · 0 评论 -
你真的了解react列表渲染中的key属性吗?
React渲染流程(简略版):生成虚拟节点 => (diff算法比对) 渲染页面1、生成虚拟节点 + 渲染结果(Key可以看作每个列表渲染中dom元素的唯一名字)<p>a</p> => name:a<p>b</p> => name:b<p>c</p> => name:c2、改变数...原创 2019-08-24 21:53:13 · 581 阅读 · 0 评论 -
React组件详解
React组件:函数组件、类组件一、函数组件|视图组件|木偶组件:react16.7版本之前-无状态组件:没有this、没有生命周期、只有属性,在16.7版本之后添加了声明周期;相对class组件性能好,因为没有生命周期state这些内容的处理,因此如果某个组价只负责渲染视图没有很多交互就可以使用函数组件。1、使用方法const Component = () =>{ ...原创 2019-08-29 18:15:37 · 244 阅读 · 0 评论 -
React组件间的通信
1、爷爷组件向父亲组件、孙子组件传递数据:通过属性注册一层层的传递2、孙子组件操作爷爷组件数据注:ToDoWrapper为爷爷组件、TodoList为父亲组件、ToDoItem为孙子组件方案一:在父组件定义函数,通过属性传递将函数传递给子组件,子组件调用父组件调用的函数方案二:React.createContext()-React16版本之后原理:...原创 2019-08-29 18:35:36 · 124 阅读 · 0 评论 -
React-router二级路由+动态路由+LocalStorage+cookie+路由权限校验
1、二级路由实现原理:就是在一级路由Route组件对应的component内编写NavLink+Route2、解决点击一级路由二级路由默认显示问题实现原理:将一一路由重定向到二级路由默认路径例:点击/activities 默认跳转 /activities/recommonded路径注:NavLink组件改变的是url、Switch组件内决定显示什么内容3、在一个组件内点击...原创 2020-06-07 17:34:06 · 1863 阅读 · 0 评论 -
React-Redux
一、Npm isntall redux --saveRedux与Vuex区别:Redux独立于React,可以在其他框架使用,但Vuex只能在Vue内使用 为什么要使用Redux?当组件嵌套的层级过深时或者兄弟组件进行数据交互时,无论是使用属性注册方式还是contenxAPI都会比较麻烦,由于Redux和Vuex类似都有一个状态管理仓库,每一个组件都可以共享这些数据,为编程者提供很大的便利...原创 2020-06-07 17:33:31 · 152 阅读 · 0 评论