聊聊 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,就不会觉得这个框架很神秘了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)