React
文章平均质量分 95
「已注销」
这个作者很懒,什么都没留下…
展开
-
React提高01 SetState的执行时机
React的setState并不保证是同步执行的,但是也不一定就是异步执行的,准确的说是利用了队列来模拟异步执行,并没有用到任务的异步API。这篇文章分析了setState的执行机制,帮助我理解setState的执行时机有很大帮助。原创 2019-07-24 11:10:50 · 735 阅读 · 0 评论 -
React-Router03 按需加载
为了提高页面加载性能,加载首屏的加载速度,有的时候我们需要对路由进行懒按需加载,减少首屏需要加载的代码包的体积。按需加载就是不加载当前路由匹配的组件代码,而不加载其他组件的代码V3中的实现在V4版本之前,需要利用getComponet这个API来实现按需加载:const about = (location, cb) => { require.ensure([], requir...原创 2019-05-13 11:08:55 · 351 阅读 · 0 评论 -
React-Router02 静态路由和动态路由
静态路由传统的路由一般都是静态路由,像Express等框架,使用的都是静态路由:React.render(( <Router> <Route path="/" component={App}> <Route path="about" component={About} /> <Route path="inbox" c...原创 2019-05-13 11:08:37 · 3874 阅读 · 0 评论 -
React基础12 React中的this绑定
已同步到个人博客,欢迎访问。为什么要bind(this)React的Class组件中常常会用到bind(this)来绑定this,但是究竟为什么要这么做呢?难道Class中的方法拿不到实例的this吗?来试验一下:class Person { constructor(name) { this.name = name; } say() { console.lo...原创 2019-05-12 23:14:16 · 276 阅读 · 0 评论 -
React基础11 React中初始化state的两种方法
初始化state的两种方法在React的组件中可以在两个位置来初始化state:(1)在组件的constructor中;(2)直接在class中利用属性赋值的方式在constructor中在constructor中初始化state如下所示:class App extends React.Component { constructor(props) { // 必须在这里通过sup...原创 2019-05-12 17:40:48 · 14347 阅读 · 0 评论 -
React提高09 Hooks
已同步到个人博客,欢迎访问。文中涉及到的代码在这里。精简版React Hooks是V16.8的新特性,是一个向后兼容的新特性(不会引入破坏性的改变)。引入的原因实现比现有方案(HOC/Render Props)更优雅的代码复用,为纯组件引入状态,能够将组件划分为更细的粒度。内置Hooks1 useState Hook(1)用法内置的useState用来为纯组件添加状态变量和更...原创 2019-03-27 18:20:01 · 748 阅读 · 0 评论 -
React提高08 Create React App
已同步到个人博客,欢迎访问。一个由Facebook官方出品的React脚手架工具,无需额外配置,迅速搭建React应用脚手架。这里只对它进行简单的尝试和入门,如果需要进一步的学习,官网在这里,文档在这里,也可以参考这篇文章进行更高阶更深入的配置和学习。使用Create React App开发React应用不必再安装Webpack或者Babel,它们已经被内置在脚手架中了它提供的功能:...原创 2019-03-01 09:37:09 · 613 阅读 · 0 评论 -
React基础13 遇到的坑
总结整理了一下一年前使用React开发测评平台时的经验。总共使用React开发了一个项目,用了1个多月,学到的东西比这一年都多,值得好好总结。已同步到个人博客,欢迎访问定时任务中的setState如果定时任务触发时,组件已经被销毁,会给出警告setState(...): Can only update a mounted or mounting component.虽然只是一个w...原创 2019-01-22 18:03:47 · 878 阅读 · 0 评论 -
React提高07 Context
已同步到个人博客,欢迎访问。简介React Context API提供了一种通过组件树传递数据的方法,而不必在每个级别通过props属性一层一层传递。Context提供了一个在组件树内可被视为“全局”的数据,当一些数据需要在不同的嵌套级别上被许多组件访问时,可以考虑使用Context。请谨慎使用Context,它使组件重用更加困难。旧的API之前的使用方法是:在上层组件(提供者)...原创 2019-01-25 16:02:27 · 144 阅读 · 0 评论 -
React提高06 Render Props
已同步到个人博客,欢迎访问。与HOC的关系HOC的出现是为了实现代码的复用,是一种React中的编程范式,基本的形式是:function HOCFactory(WrappedComponent, ...args) { return class HOC extends React.Component { render(){ return <WrappedCom...原创 2019-01-25 16:02:02 · 240 阅读 · 0 评论 -
React提高05 高阶组件
已同步到个人博客,欢迎访问。什么是高阶组件高阶组件(简称HOC)的目的就是实现代码的复用,它不是React的API,而是根据React的特性形成的一种开发范式。它接受一个组件作为参数并返回一个新的组件function HOCFactory(WrappedComponent, ...args) { return class HOC extends React.Component { ...原创 2019-01-25 16:01:36 · 227 阅读 · 0 评论 -
React提高04 对虚拟DOM和加载过程的理解
已同步到个人博客,欢迎访问。React虚拟DOM的理解虚拟DOM是用JS的对象结构模拟出html中DOM的结构,批量的增删改查,由于直接操作的是JS对象,所以速度要比操作真实DOM要快,最后更新到真正的额DOM中虚拟DOM构建的对象,除了dom相关属性,还包括了React自身需要的属性,比如ref,key等,大概如下结构:{ type: 'div', props: { ...原创 2019-01-25 16:00:00 · 453 阅读 · 0 评论 -
React提高02 React性能优化
已同步到个人博客,欢迎访问。PureRenderMixin因为react的diff是在某一个根节点发生变化的时候,调用所有节点进行render,再对生成的虚拟DOM进行对比,如果不变则不对真实DOM进行更新。这就导致了性能的浪费。所以优化针对两方面:拆分组件,有利于组件复用和优化避免不必要的render避免不要的render,主要基于componentShouldUpdate(...原创 2019-01-25 15:58:55 · 259 阅读 · 0 评论 -
React基础01 入门
React入门笔记。原创 2017-04-13 14:31:50 · 481 阅读 · 0 评论