聊聊 React
都说 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的更多相关文章
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- 聊聊React的路由React-Router、react-router-dom
关于二者的区别 参见:https://github.com/mrdulin/blog/issues/42 直接使用react-router-dom好了,react-router-dom封装了react ...
- Vue.JS React 精彩文章汇总
JavaScript深入系列 [干货] JavaScript数组所有API全解密 [干货] 移动端:页面->手淘互动动效的探索 - IT大咖说 - 大咖干货,不再错过 [扫盲] Jonath ...
- React Native踩坑日记 —— tailwind-rn
项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看, ...
- React Native纯干货总结
随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...
- 【react】什么是fiber?fiber解决了什么问题?从源码角度深入了解fiber运行机制与diff执行
壹 ❀ 引 我在[react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?一文中,介绍了虚拟dom的概念,以及react中虚拟dom的使用场景 ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- 聊聊CSS postproccessors
阿里妈妈 @一丝 准备发布其CSSGrace,即CSS后处理插件,于是顺便聊聊CSS postprocessors. 从Rework说起 Rework是TJ大神开发的CSS预处理框架.但为什么会出 ...
随机推荐
- 11g rac关闭、开启(顺序)
1.关闭数据库(oracle) srvctl stop database -d rac 2.关闭集群(root) /u01/app/11.2.0/grid/bin/crsctl stop cluste ...
- 跨站点脚本编制 - SpringBoot配置XSS过滤器(基于Jsoup)
1. 跨站点脚本编制 风险:可能会窃取或操纵客户会话和 cookie,它们可能用于模仿合法用户,从而使黑客能够以该用户身份查看或变更用户记录以及执行事务. 原因:未对用户输入正确执行危险字符清 ...
- react第四单元(ref与DOM-findDomNode-unmountComponentAtNode)
第四单元(ref与DOM-findDomNode-unmountComponentAtNode) #课程目标 理解react的框架使用中,真实dom存在的意义. 使用真实dom和使用虚拟dom的场景. ...
- [日常摸鱼]bzoj1257余数之和
题意:输入$k,n$,求$\sum_{i=1}^n k \mod i$ $k \mod i=k-i*\lfloor \frac{k}{i} \rfloor $,$n$个$k$直接求和,后面那个东西像比 ...
- Web服务器-正则表达式-正则其他(3.1.3)
@ 目录 其他api说明 关于作者 其他api说明 pattern = re.compile(r'\d+') m = pattern.match('6e812738712aaadad13') m.gr ...
- 死磕以太坊源码分析之downloader同步
死磕以太坊源码分析之downloader同步 需要配合注释代码看:https://github.com/blockchainGuide/ 这篇文章篇幅较长,能看下去的是条汉子,建议收藏 希望读者在阅读 ...
- Python 搜索文件,文件过滤,pathlib模块
1,搜索文件,文件过滤 这里使用:pathlib 模块的 Path.glob(pattern) 方法,该方法可以用来过滤目标文件,以迭代器的形式返回搜索结果. pattern: 通配符:" ...
- 太酷炫了!!我会Python 导包八种方法,你呢?
1. 直接 import 人尽皆知的方法,直接导入即可 >>> import os >>> os.getcwd() '/home/wangbm'复制代码 与此类似的 ...
- asp.net webapi 给字段赋初始值DefaultValue 解决前端传空字符串后台接受不是“”而是NULL
/// <summary> /// 存储ID /// </summary> public Guid SaveID { get; set; } /// <summary&g ...
- MySQL误删除用户怎么解决
前言:在不考虑到原来用户对关联数据库的授权问题的情况下,有以下两种思路解决 #1.安全模式修改 第一步:关闭数据库服务: [root@db01 ~]#/etc/init.d/mysqld stop 第 ...