关于react.js:面试官让你说说react状态管理

38次阅读

共计 1783 个字符，预计需要花费 5 分钟才能阅读完成。

开发者普遍认为状态是组件的一部分, 然而同时却又在剥离状态上不停的造轮子, 这不是很矛盾么?

对于一个最简略的文本组件而言

function Text(){const [text, setText] = useState('载入')
  return (){<p>{text}</p>
  }
}

你感觉应该把 text 从 Text 组件中剥离么? 如果你的直觉通知你不应该这么做, 那为何要应用 redux mobx jotai 等等一系列稀奇古怪的状态治理库来让咱们的代码变得更简单?

所以 why?

还不是 React 本人的锅!!!

因为 React 在组件状态上给出了双重定义, 内敛的 state 和凋谢的 props.
同时因为 jsx 的限度导致组件通信只能依赖 props.

有人会说还有 context, 但如果你为组件通信独自减少一层 provide, 那随着利用收缩, 你的状态会被 xml 构造割得支离破碎, 最初只剩下繁多 store 这颗有毒药丸.

因为 React 天生状态同步上的缺点, 才让状态治理这件事在 React 社区如此发达, 这其实是病态的.

想想战国时期群雄逐鹿吧. 还不是周天子失仪, 看看 Vue 就没有这么多狗屁倒灶的事.

状态治理生态的病态凋敝让整个 React 生态变得凌乱.

不同状态治理库之间潜在的集成老本, 以及围绕这些状态治理打造的组件库又须要思考集成. 看看 Route5 吧, 我感觉官网的 React 和 Redux 集成计划基本不够. 毕竟还有好几个库在那等着呢 …

从 React 本身角度来看, 只有解决两个问题, 就没有所谓的状态治理了.

jsx 下的组件构造无非两种, 蕴含战争级, 对于蕴含嵌套的构造, 繁多 store 是可行的, 要解决的无非是外部的 jsx 片段之间如何共享和同步状态. 其实很简略只有给这些 jsx 片段绑定上一个独特的 context 就行了,

import {createComponent} from 'structured-react-hook'

const Component = createComponent({
  initState:{
    A:'A',
    B:'B',
    M:'M',
  },
  view:{renderB(){
      return(
        <>
          <div>{this.state.M}</div>
          <div>{this.state.B}</div>
        </>
      )
    },
    renderA(){
      return(
        <>
          <div>{this.state.M}</div>
          <div>{this.state.A}</div>
        </>
      )
    },
    render(){
      return(
        <>
          <div>{this.state.M}</div>
          <div>{this.view.renderB()}</div>
          <div>{this.view.renderA()}</div>
        </>
      )
    }
  }
})

参考前端进阶面试题具体解答

一个组件能够切分任一的 jsx 片段到 view 里, 同时将状态放在 initState 里治理, 在运行时让 render 函数的 this.state 指向 initState 就行了, 当然外部有些魔法, 这就不提了.

当然组件大了肯定须要平行切割, 不然会遇到性能和保护上的问题. 对于平行组件如何让他们彼此共享和同步状态呢?

const ComponentA = createComponent({
  name:'ComponentA',
  initState:{A:'A'},
  view:{render(){
      return(<div>{this.combination.ComponentB.state.B}</div>
      )
    }
  }
})

const ComponentB = createComponent({
  name:'ComponentB',
  initState:{B:'B'},
  view:{render(){
      return(<div>{this.combination.ComponentA.state.A}</div>
      )
    }
  }
})

就这么简略, 只有让每个组件的实例能在彼此的 this 上相互感知, 操作和共享状态并不是难事.

这样对于 jsx 内平行的组件来说再也不须要为了通信而懊恼了. 无论逾越多少层, 最终我都会找到你.

所以解决这两个问题, 还须要额定的状态治理么?

至多在我看来状态治理是个伪命题, 组件和状态自身就是不可分割的一部分, 把状态视为组件的外围, 只有解决了组件的问题, 状态治理天然也就不是问题了

然而只有 React 官网不作为, 状态治理社区的病态凋敝还将持续继续上来

正文完