都说 React 开发效率高,但效率高在哪呢?来细看看。

用 d3 写一个 List:

const renderList = data => {
d3.select("ul")
.selectAll("li")
.data(data, d => d.id)
.join(
enter => enter.append("li").text(d => d.text),
update => update.text(d => d.text),
exit => exit.remove()
);
};

d3 把 view 和 data 的关系分为 3 种:

  • enter:有 data 没 view
  • update:有 data 有 view
  • exit:有 view 没 data

数据更新,开发者需考虑「新 view」对比「老 view」,新增的「enter」、更新的「update」、减少的「exit」要怎么处理。


用 React 来写:

const List = ({ data }) => {
return (
<ul>
{data.map(d => (
<li key={d.id}>{d.text}</li>
))}
</ul>
);
};

数据更新,开发者只需考虑「新 view」是什么样,不用考虑怎么把「老 view」变成「新 view」,比 d3 简单。


React 是不是比 d3 好用?

答:不一定,要看场景。React 框架把「新增的、更新的、减少的处理」都做了,开发者没法干预。但如果你想做一些动画,需要精细控制「新增的、更新的、减少的」,React 就不如 d3 好用了。

再看 React 代码:

const List = ({ data }) => {
return (
<ul>
{data.map(d => (
<li key={d.id}>{d.text}</li>
))}
</ul>
);
};

React 把组件简化成了一个函数,data -> view。组件就是函数,意味着函数可以怎么玩,组件就可以怎么玩。

  • 函数内调用别的函数

    function a() {}
    function b() {} function c() {
    a();
    b();
    }
    function A() {}
    function B() {} function C() {
    return (
    <div>
    <A />
    <B />
    </div>
    );
    }
  • 函数的返回值作为别的函数的传参

    function a() {}
    function b(arg) {} function c() {
    b(a());
    }
    function A() {}
    function B({ children }) {
    return <div>{children}</div>;
    } function C() {
    return (
    <B>
    <A />
    </B>
    );
    }
  • 高阶函数

    function memoize(fn) {
    const cache = {};
    return arg => {
    if (cache[arg]) return cache[arg];
    else {
    const result = fn(arg);
    cache[arg] = result;
    return result;
    }
    };
    } const memoizedSqrt = memoize(Math.sqrt);
    const A = () => {};
    const wrapper = Cmp => {};
    const WrappedA = wrapper(A);
  • Continuation,或者叫 Callback。Callback 的特点是:等时机成熟后才执行。

    const handler = () => {};
    button.addEventListener("click", handler);
    // Context Consumer
    <ThemeContext.Consumer>
    {theme => <Cmp theme={theme} />}
    </ThemeContext.Consumer>
    // Render Props
    const MouseTracker = Cmp => {
    return (
    <Mouse
    render={mouse => <Cmp mouse={mouse} />}
    />
    );
    };
  • 递归

    const factorial = n => {
    if (n === 1) return 1;
    else return n * factorial(n - 1);
    };
    const Tree = ({ data }) => (
    <ul>
    {data.map(d => (
    <li key={d.id}>
    {d.text}
    {d.children && <Tree data={d.children} />}
    </li>
    ))}
    </ul>
    );

React 组件的种种用法,本质都是函数的用法。从函数的角度来理解、运用 React,就不会觉得这个框架很神秘了。

聊聊 React的更多相关文章

  1. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  2. 聊聊React的路由React-Router、react-router-dom

    关于二者的区别 参见:https://github.com/mrdulin/blog/issues/42 直接使用react-router-dom好了,react-router-dom封装了react ...

  3. Vue.JS React 精彩文章汇总

    JavaScript深入系列  [干货] JavaScript数组所有API全解密  [干货] 移动端:页面->手淘互动动效的探索 - IT大咖说 - 大咖干货,不再错过 [扫盲] Jonath ...

  4. React Native踩坑日记 —— tailwind-rn

    项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看, ...

  5. React Native纯干货总结

    随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...

  6. 【react】什么是fiber?fiber解决了什么问题?从源码角度深入了解fiber运行机制与diff执行

    壹 ❀ 引 我在[react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?一文中,介绍了虚拟dom的概念,以及react中虚拟dom的使用场景 ...

  7. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  8. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  9. 聊聊CSS postproccessors

      阿里妈妈 @一丝 准备发布其CSSGrace,即CSS后处理插件,于是顺便聊聊CSS postprocessors. 从Rework说起 Rework是TJ大神开发的CSS预处理框架.但为什么会出 ...

随机推荐

  1. PHP MySQL 快速导入10万条数据

    项目背景 数据来源:所有数据均为外部导入,最大数据量在10w+ 输出数据:导出经过业务处理之后的数据 使用框架:fastadmin 涉及的问题: 1.数据读取 2.数据保存 使用数据:10w+ 解决方 ...

  2. 图的建立以及应用(BFS,DFS,Prim)

    关于带权无向图的一些操作 题目:根据图来建立它的邻接矩阵,通过邻接矩阵转化为邻接表,对邻接表进行深度优先访问和广度优先访问,最后用邻接矩阵生成它的最小生成树: 1.输入一个带权无向图(如下面图1和图2 ...

  3. burpsuite 2020.12.1最新版蓝色版,下载安装破解

    最新版Burpsuite下载破解安装 安装包链接:https://cloud.189.cn/t/qUVzYbuAJzqm(访问码:mw12) 1.首先,我们解压,可以看到解压后的文件夹里有如下文件 2 ...

  4. Nocalhost,让开发回归原始又简单

    在刚刚结束的 2020 腾讯云 Techo Park 大会 DevOps 分论坛「开发乘云起,扶摇九万里」上,CODING CEO 张海龙发布了由 CODING 团队自主研发的全新产品 Nocalho ...

  5. 探究虚拟dom与diff算法

    一.虚拟DOM (1)什么是虚拟DOM? vdom可以看作是一个使用javascript模拟了DOM结构的树形结构,这个树结构包含整个DOM结构的信息,如下图:   可见左边的DOM结构,不论是标签名 ...

  6. 【mybatis-plus】CRUD必备良药,mybatis的好搭档

    做开发,免不了对数据进行增删改查,那么mybatis-plus我觉得很适合我这个java新手,简单好用. 官网在这 一.什么是mybatis-plus MyBatis-Plus(简称 MP),是一个M ...

  7. Dapper 返回Sql server 自增长ID 标识列SCOPE_IDENTITY

    原理 使用SELECT SCOPE_IDENTITY(),取获取刚刚插入记录自增的主键 示例 entity.Create(); StringBuilder strSql = new StringBui ...

  8. ESP定律脱壳

     ESP定律是比较常用的脱壳方式,作为新手用的也比较多简单写一下我的看法. esp定律的使用过程大致为: 1.开始就点F8,注意观察OD右上角的寄存器中ESP有没突现(变成红色),并且只有sp和ip为 ...

  9. kickstart+pxe部署

    ------------恢复内容开始------------ kickstart 通过网络安装系统 ----pxe kickstart,cobbler pex 预启动执行环境 通过网络接口启动计算机, ...

  10. 支付业务优化else if 代码

    背景 最近在做项目的时候,需要接入支付.由于接入第三方支付而且还不知止一家,需要接入很多家.比如说支付宝.微信.富友支付等.每家支付都一个回调.现如今的代码,根据不同的第三方支付一大堆else if判 ...