这是一个创建于 1400 天前的主题，其中的信息可能已经有所发展或是发生改变。
之前用 react 做点零散的界面，感觉很好用很神奇。现在用来开发一些自己的小项目，突然冒出来很多问题，才发现原来一直没理解它。
比如组件什么时候会被重新创建，而什么时候只是重新渲染？
什么时候用 props 什么时候用 state ？
React 内部是怎样比较前后两次 state 的差异的，会导致哪些组件重新渲染？
React 的版本更新还很快，自己对组件的生命周期的理解，到现在还没来得及理清楚。
有没有也曾跟我一样状态的？感觉要补补底层的知识了，不知道看点什么资料好呢？
比如组件什么时候会被重新创建，而什么时候只是重新渲染？
什么时候用 props 什么时候用 state ？
React 内部是怎样比较前后两次 state 的差异的，会导致哪些组件重新渲染？
React 的版本更新还很快，自己对组件的生命周期的理解，到现在还没来得及理清楚。
有没有也曾跟我一样状态的？感觉要补补底层的知识了，不知道看点什么资料好呢？
 |
1
duduaba 2021-02-20 10:46:47 +08:00  1
这都是很基础的 react 知识了。建议看一下 react 官方文档，看完文档再对不了解的部分单独查询理解。
|
 |
2
hahaFck 2021-02-20 10:49:51 +08:00
想知道 react 适合做企业的管理系统么，很早以前查 react 资料，都说是适合做单页应用什么的。
|
 |
3
jmyz0455 2021-02-20 10:49:51 +08:00
我也刚开始学，props 我觉得命名上容易跟 redux 混淆，所以用 attrs 替代，所以我的理解是：
redux 拿到的是 props 需要在组件上直接传递的就 attrs 组件里的状态用 state 有不对请指正。 |
 |
5
66beta 2021-02-20 10:52:29 +08:00
你说的这些，得看源码了
|
 |
6
akasuv 2021-02-20 11:19:40 +08:00 1
最近刚好在看，推荐两个比较好的文章，一个是 Sebastian Markbåge 最初构造 React 时的想法，一个是关于 Virtual DOM, Reconciliation 和 Fiber 整体架构的解析，我注册还没满 30 天，不能发链接 :( 搜一下应该找得到
|
|
7
akasuv 2021-02-20 11:24:05 +08:00 2
两篇文章都在 Github 上面 acdlite/react-fiber-architecture 和 reactjs/react-basic
|
 |
8
surfwave 2021-02-20 11:24:36 +08:00
确实像 1 楼说的，还是多看看官方文档，这些都是很基础的知识了。官方文档是跟随版本同步更新的，而网上的教程有些都过时了。另外，现在能用 hooks 还是用 hooks 吧。
|
 |
9
weimo383 2021-02-20 11:30:29 +08:00 via Android 1
react 不会比较 state 的差异，每次都是新建一个状态。它比较的是虚拟 dom 的差异
|
 |
10
hantsy 2021-02-20 11:31:42 +08:00
React 设计太过 JS 了，一切用 Function 写起来就容易得多。
要深层次的使用，还是要很好的 JS 基础知识，特别是 high order function 等，使用 middleware 多层嵌套就感觉容易了，不然很多代码太难理解了。 话说回来，对于熟悉 OOP 的人，还是 Angular 简单得多。 |
 |
11
azcvcza 2021-02-20 11:35:24 +08:00
你上 react 官网把文档看一遍，这些问题就解决了
|
 |
12
Baymaxbowen 2021-02-20 12:13:31 +08:00 via iPhone 1
@hahaFck antd 阿里出的了解一下
|
|
13
azcvcza 2021-02-20 12:17:58 +08:00 1
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 替代实现） |
 |
14
sillydaddy OP |
|
15
akasuv 2021-02-20 12:36:59 +08:00
@azcvcza “缺点就是不能像 class 组件一样方便的拿 ref 来控制具体行为”，函数组件里有 useRef 这个钩子
|
 |
16
yanulg 2021-02-20 14:06:15 +08:00
把官方文档看一遍，state 是组件内的状态管理，props 是给子组件传值的，先不用 hooks，用 class component 先理解一下 react 的用法，之后再考虑 hooks 这种没有明显优点但是 react 团队使劲推的东西
|
 |
17
chuhemiao 2021-02-20 14:40:41 +08:00 2
推荐卡总的 React 技术揭秘 https://react.iamkasong.com/
|
 |
18
weixiangzhe 2021-02-20 15:04:15 +08:00 1
|
 |
19
Leviathann 2021-02-20 15:09:22 +08:00 via iPhone
react 没那么高级
就是靠 setstate 手动触发和 props 浅比较自动触发渲染 |
|
21
azcvcza 2021-02-20 15:16:50 +08:00
@akasuv 如果是到了具体控制 dom 组件的表现的时候，useRef 会提醒你不能在整个的 function 组件上用，但是可以在 function 组件中 render 出来的 jsx 中的元素上绑，有些时候达不到想要的效果，需要用 forwardRef 和 useImperativeHandle 取代。例如多个大的相似表单，想要控制表单的 validate 行为的时候
|
 |
22
Rocketer 2021-02-21 03:45:23 +08:00 via iPhone
@jmyz0455 刚开始学的话，还是别把 redux 掺和进来了。先试着尽量不用 redux，全用 hooks 解决，实在不行了再考虑 redux （实际上很少遇到非 redux 不可的项目）。
redux 是 react 早期还不太完善时的必备组件，现在还有很多人用只是因为老程序员们习惯了，并不代表它是必要的，甚至都不能算是一个好的开发实践。 redux 太重了，不仅拖慢开发速度，也拖慢运行速度，能不用还是尽量别用。 |
 |
24
cgpiao 2021-02-22 14:47:32 +08:00 via iPhone
react 状态管理之难用想让人放弃。
|
 |
25
huijiewei 2021-02-28 01:26:15 +08:00
react 啃了 1 个月
大致啃明白了 主要是网上的教程参差不齐，React 迭代了这么多版本，从开始的 createClass 到 ES 6 的 class 再到 HOC 的引入，Context 的引入，到最后的 Hooks 的大招。 如果不了解发展历史，光看着教程各种不同的写法就头大 个人建议，抛开第三方库，直接写 Function 组件，从 React Hooks 和 Context 走起。 状态管理基本上嵌套读写分离的 Context 都能搞定。太复杂了就引入 Recoil 和 Jotai 原子状态库。 |
Select Language