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

有对 React 感到困惑的吗?

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

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

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

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

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

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

    redux 太重了,不仅拖慢开发速度,也拖慢运行速度,能不用还是尽量别用。
    jmyz0455
        23
    jmyz0455  
       2021-02-22 11:05:55 +08:00
    @Rocketer 可能我看的教程落后了?我还没学到 Hooks,看看如何替代 Redux/Mobx 。
    cgpiao
        24
    cgpiao  
       2021-02-22 14:47:32 +08:00 via iPhone
    react 状态管理之难用想让人放弃。
    huijiewei
        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 原子状态库。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3609 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 10:45 · PVG 18:45 · LAX 03:45 · JFK 06:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.