V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
React
sillydaddy
V2EX  ›  React

有对 React 感到困惑的吗?

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

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

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

    话说回来,对于熟悉 OOP 的人,还是 Angular 简单得多。
    azcvcza
        11
    azcvcza   11 天前
    你上 react 官网把文档看一遍,这些问题就解决了
    Baymaxbowen
        12
    Baymaxbowen   11 天前 via iPhone   ❤️ 1
    @hahaFck antd 阿里出的了解一下
    azcvcza
        13
    azcvcza   11 天前   ❤️ 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 替代实现)
    sillydaddy
        14
    sillydaddy   11 天前 via Android
    @hantsy 我不太习惯用 Function,感觉组件还是和类比较相近~~比如它也有内部状态,也是封装的一些相关联的行为。

    只不过对这个黑盒子的行为不深入理解,会有很多东西出错。比如渲染效率等等。
    akasuv
        15
    akasuv   11 天前
    @azcvcza “缺点就是不能像 class 组件一样方便的拿 ref 来控制具体行为”,函数组件里有 useRef 这个钩子
    yanulg
        16
    yanulg   11 天前
    把官方文档看一遍,state 是组件内的状态管理,props 是给子组件传值的,先不用 hooks,用 class component 先理解一下 react 的用法,之后再考虑 hooks 这种没有明显优点但是 react 团队使劲推的东西
    chuhemiao
        17
    chuhemiao   11 天前   ❤️ 2
    推荐卡总的 React 技术揭秘 https://react.iamkasong.com/
    Leviathann
        19
    Leviathann   11 天前 via iPhone
    react 没那么高级
    就是靠 setstate 手动触发和 props 浅比较自动触发渲染
    Torpedo
        20
    Torpedo   11 天前
    @yanulg hook 优点挺明显的,特别容易组合,hoc 组合太依赖顺序了
    azcvcza
        21
    azcvcza   11 天前
    @akasuv 如果是到了具体控制 dom 组件的表现的时候,useRef 会提醒你不能在整个的 function 组件上用,但是可以在 function 组件中 render 出来的 jsx 中的元素上绑,有些时候达不到想要的效果,需要用 forwardRef 和 useImperativeHandle 取代。例如多个大的相似表单,想要控制表单的 validate 行为的时候
    Rocketer
        22
    Rocketer   11 天前 via iPhone
    @jmyz0455 刚开始学的话,还是别把 redux 掺和进来了。先试着尽量不用 redux,全用 hooks 解决,实在不行了再考虑 redux (实际上很少遇到非 redux 不可的项目)。

    redux 是 react 早期还不太完善时的必备组件,现在还有很多人用只是因为老程序员们习惯了,并不代表它是必要的,甚至都不能算是一个好的开发实践。

    redux 太重了,不仅拖慢开发速度,也拖慢运行速度,能不用还是尽量别用。
    jmyz0455
        23
    jmyz0455   9 天前
    @Rocketer 可能我看的教程落后了?我还没学到 Hooks,看看如何替代 Redux/Mobx 。
    cgpiao
        24
    cgpiao   9 天前 via iPhone
    react 状态管理之难用想让人放弃。
    huijiewei
        25
    huijiewei   4 天前
    react 啃了 1 个月

    大致啃明白了

    主要是网上的教程参差不齐,React 迭代了这么多版本,从开始的 createClass 到 ES 6 的 class 再到 HOC 的引入,Context 的引入,到最后的 Hooks 的大招。

    如果不了解发展历史,光看着教程各种不同的写法就头大

    个人建议,抛开第三方库,直接写 Function 组件,从 React Hooks 和 Context 走起。

    状态管理基本上嵌套读写分离的 Context 都能搞定。太复杂了就引入 Recoil 和 Jotai 原子状态库。
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1424 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 23:14 · PVG 07:14 · LAX 15:14 · JFK 18:14
    ♥ Do have faith in what you're doing.