React as UI runtime

[Tomotoes]

今天我 coding 时, 思考了一下 React 给开发者带来的心智负担.

以下的代码 从语法形式上看是一个函数, 但它代表的不仅仅是函数那么简单.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在复杂的页面中, 有很多很多 这样的函数组件, 它们作为最基本的单元 组成了 整个了组件树.

传统的前端开发中, 所有的 代码 只会 run 一次 (事件监听是环境提供 不考虑), 并且数据流都是由一条条命令所决定的, 我只需要理解 代码做了什么.

而 Vue, Angular 是 proxy state, 也很好预测数据流.

而相比之下 React 的做法却大不一样, 它为开发者做了什么?

我之前的理解是, React 提供的不只是一个优秀的 diff 算法与增量 render 组件, 而是为我们提供了一种思想, 一种构建 UI 的思想.

此想法可以由一行代码 来表示:

const React = state => render(state)

但现在看来 React 代表的思想不只是这一行代码这么简单, 它更像一个由 state 驱动的 UI runtime.

比如上面的代码 每一次 update state, 都会 rerender 这个组件.

而 state 虽然是 函数中的常量, 但它们是会动态改变的.

这就好比 虽然在函数组件中定义了 const [count, setCount] = useState(0);, 但它们只是 React runtime 注入数据的一种方式.

这就给我造成了 一种心智负担.

我必须去理解, 组件有哪些 数据 是动态改变的常量,有哪些数据是普通常量.

我必须去预测 这个函数组件 在 React 运行时 中 update state 后发生的行为.

之前用类组件开发时 但很容易接受, 毕竟 只需要在 钩子函数里 写副作用逻辑好了, 而使用 Hooks 开发时 我感觉到了割裂感.

是的, 我需要习惯 Hooks 的模式, 这个过程也让我对 React 有了更深度的理解.