2个奇怪的React写法

更新日期: 2023-03-15阅读: 726标签: React

虽然react官网用大量篇幅介绍最佳实践,但因JSX语法的灵活性,所以总是会出现奇奇怪怪的React写法。本文介绍2种奇怪(但在某些场景下有意义)的React写法。


ref的奇怪用法

这是一段初看让人很困惑的代码

function App() {
const [dom, setDOM] = useState(null);

return <div ref={setDOM}></div>;
}

让我们来分析下它的作用。

首先,ref有两种形式(曾经有3种):

  1. 形如{current: T}的数据结构

  2. 回调函数形式,会在ref更新、销毁时触发

例子中的setDOM是useState的dispatch方法,也有两种调用形式:

  1. 直接传递更新后的值,比如setDOM(xxx)

  2. 传递更新状态的方法,比如setDOM(oldDOM => return /* 一些处理逻辑 */)

在例子中,虽然反常,但ref的第二种形式和dispatch的第二种形式确实是契合的。

也就是说,在例子中传递给ref的setDOM方法,会在「div对应DOM」更新、销毁时执行,那么dom状态中保存的就是「div对应DOM」的最新值。

这么做一定程度上实现了「感知DOM的实时变化」,这是单纯使用ref无法具有的能力。


useMemo的奇怪用法

通常我们认为useMemo用来缓存变量props,useCallback用来缓存函数props。

但在实际项目中,如果想通过「缓存props」的方式达到子组件性能优化的目的,需要同时保证:

  • 所有传给子组件的props的引用都不变(比如通过useMemo)

  • 子组件使用React.memo

类似这样:

function App({todos, tab}) {
const visibleTodos = useMemo(
() => filterTodos(todos, tab),
[todos, tab]);

return <Todo data={visibleTodos}/>;
}

// 为了达到Todo性能优化的目的
const Todo = React.memo(({data}) => {
// ...省略逻辑
})

既然useMemo可以缓存变量,为什么不直接缓存组件的返回值呢?类似这样:

function App({todos, tab}) {
const visibleTodos = useMemo(
() => filterTodos(todos, tab),
[todos, tab]);

return useMemo(() => <Todo data={visibleTodos}/>, [visibleTodos])
}

function Todo({data}) {
return <p>{data}</p>;
}

如此,需要性能优化的子组件不再需要手动包裹React.memo,只有当useMemo依赖变化后子组件才会重新render。


总结

除了这两种奇怪的写法外,你还遇到哪些奇怪的React写法呢?

以上文章来源于魔术师卡颂 ,作者:中年发福的卡颂


链接: https://www.fly63.com/article/detial/12403

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。

React深度编程:受控组件与非受控组件

受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。

React框架学习_关于React两种构建应用方式选择

一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

Gatsby.js_一款基于React.js静态站点生成工具

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。

React创建组件的三种方式及其区别

React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件

react生命周期详解_深入理解React生命周期

React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,,表示有限个状态以及在这些状态之间的转移和动作行为的模型。

React + Webpack 构建打包优化

React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库,去除 import 引用,按需打包所用的类库,比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面:构建速度慢,打包后的文件体积过大

react router中页面传值的三种方法

这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state

react 高阶组件的 理解和应用

react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)

react中的refs属性的使用方法

React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!