有对 React 感到困惑的吗?

2021-02-20 10:36:10 +08:00
 sillydaddy
之前用 react 做点零散的界面,感觉很好用很神奇。现在用来开发一些自己的小项目,突然冒出来很多问题,才发现原来一直没理解它。
比如组件什么时候会被重新创建,而什么时候只是重新渲染?
什么时候用 props 什么时候用 state ?
React 内部是怎样比较前后两次 state 的差异的,会导致哪些组件重新渲染?
React 的版本更新还很快,自己对组件的生命周期的理解,到现在还没来得及理清楚。

有没有也曾跟我一样状态的?感觉要补补底层的知识了,不知道看点什么资料好呢?
4165 次点击
所在节点    React
25 条回复
duduaba
2021-02-20 10:46:47 +08:00
这都是很基础的 react 知识了。建议看一下 react 官方文档,看完文档再对不了解的部分单独查询理解。
hahaFck
2021-02-20 10:49:51 +08:00
想知道 react 适合做企业的管理系统么,很早以前查 react 资料,都说是适合做单页应用什么的。
jmyz0455
2021-02-20 10:49:51 +08:00
我也刚开始学,props 我觉得命名上容易跟 redux 混淆,所以用 attrs 替代,所以我的理解是:
redux 拿到的是 props
需要在组件上直接传递的就 attrs
组件里的状态用 state
有不对请指正。
jmyz0455
2021-02-20 10:50:22 +08:00
@hahaFck 适合,不管 vue 和 react 都能做,跟框架无关。
66beta
2021-02-20 10:52:29 +08:00
你说的这些,得看源码了
akasuv
2021-02-20 11:19:40 +08:00
最近刚好在看,推荐两个比较好的文章,一个是 Sebastian Markbåge 最初构造 React 时的想法,一个是关于 Virtual DOM, Reconciliation 和 Fiber 整体架构的解析,我注册还没满 30 天,不能发链接 :( 搜一下应该找得到
akasuv
2021-02-20 11:24:05 +08:00
两篇文章都在 Github 上面 acdlite/react-fiber-architecture 和 reactjs/react-basic
surfwave
2021-02-20 11:24:36 +08:00
确实像 1 楼说的,还是多看看官方文档,这些都是很基础的知识了。官方文档是跟随版本同步更新的,而网上的教程有些都过时了。另外,现在能用 hooks 还是用 hooks 吧。
weimo383
2021-02-20 11:30:29 +08:00
react 不会比较 state 的差异,每次都是新建一个状态。它比较的是虚拟 dom 的差异
hantsy
2021-02-20 11:31:42 +08:00
React 设计太过 JS 了,一切用 Function 写起来就容易得多。

要深层次的使用,还是要很好的 JS 基础知识,特别是 high order function 等,使用 middleware 多层嵌套就感觉容易了,不然很多代码太难理解了。

话说回来,对于熟悉 OOP 的人,还是 Angular 简单得多。
azcvcza
2021-02-20 11:35:24 +08:00
你上 react 官网把文档看一遍,这些问题就解决了
Baymaxbowen
2021-02-20 12:13:31 +08:00
@hahaFck antd 阿里出的了解一下
azcvcza
2021-02-20 12:17:58 +08:00
q:比如组件什么时候会被重新创建,而什么时候只是重新渲染?
一般来说,如果是 for 循环渲染的列表,会要求你绑定一个 key,react 会拿 key 来计算差异来决定是否创建新的,还是在老的上做替换
q:什么时候用 props 什么时候用 state ?
state 专注于组件内部状态,能用 props 计算出来的一般都不用存在 state 里边
q:React 内部是怎样比较前后两次 state 的差异的,会导致哪些组件重新渲染?
一般而言,通过 setState 引发的 state 变化会触发当前组件更新;如果有操作修改到上层容器的状态,那上层容器和他装的东西都会一起更更新,也即组件树中,该节点和他的叶子节点会一路更新下去
q:React 的版本更新还很快,自己对组件的生命周期的理解,到现在还没来得及理清楚。
class 组件比较注重一个组件是该怎么写的,但是该组件的一些共性行为会分散在各个生命周期里,例如 didMount 的时候注册事件监听,网络请求,willUnMount 的时候清除事件监听; function 组件配合 useHook 可以把散落的逻辑抽象出来,实现逻辑复用,缺点就是不能像 class 组件一样方便的拿 ref 来控制具体行为(可以通过 forwardRef 和 useImperativeHandle 替代实现)
sillydaddy
2021-02-20 12:30:30 +08:00
@hantsy 我不太习惯用 Function,感觉组件还是和类比较相近~~比如它也有内部状态,也是封装的一些相关联的行为。

只不过对这个黑盒子的行为不深入理解,会有很多东西出错。比如渲染效率等等。
akasuv
2021-02-20 12:36:59 +08:00
@azcvcza “缺点就是不能像 class 组件一样方便的拿 ref 来控制具体行为”,函数组件里有 useRef 这个钩子
yanulg
2021-02-20 14:06:15 +08:00
把官方文档看一遍,state 是组件内的状态管理,props 是给子组件传值的,先不用 hooks,用 class component 先理解一下 react 的用法,之后再考虑 hooks 这种没有明显优点但是 react 团队使劲推的东西
chuhemiao
2021-02-20 14:40:41 +08:00
推荐卡总的 React 技术揭秘 https://react.iamkasong.com/
weixiangzhe
2021-02-20 15:04:15 +08:00
Leviathann
2021-02-20 15:09:22 +08:00
react 没那么高级
就是靠 setstate 手动触发和 props 浅比较自动触发渲染
Torpedo
2021-02-20 15:12:27 +08:00
@yanulg hook 优点挺明显的,特别容易组合,hoc 组合太依赖顺序了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/754501

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX