React Bits 中文版：深入了解 React 的核心概念

React 是一种流行的前端 JavaScript 库，它提供了构建用户界面的高效和灵活的方式。但是，如果你想更深入地了解 React 的核心概念，你可能需要掌握一些更高级的特性和技巧。

在本文中，我们将介绍 React Bits 的中文翻译版，并深入探讨其中所包含的各种 React 技术，例如：

render props 模式
高阶组件模式
受控组件与非受控组件
组件通信模式
状态管理库的使用及其优缺点

Render Props 模式

Render Props 是 React 中一种常见的模式，它允许您从一个组件向子组件传递函数或对象，以便让子组件可以访问到一些数据或状态。Render Props 模式非常适用于那些有类似功能的组件之间进行复用的情况。

下面是一个例子，其中父组件 Mouse 使用 Render Props 将鼠标位置的信息传递给子组件 Cat。

----- ----- ------- --------------- -
  ------------------ -
    -------------

    -------------------- - --------------------------------
    ---------- - - -- -- -- - --
  -

  ---------------------- -
    ---------------
      -- --------------
      -- -------------
    ---
  -

  -------- -
    ------ -
      ---- -------- ------- ------ -- -----------------------------------
        -------------------------------
      ------
    --
  -
-

----- --- ------- --------------- -
  -------- -
    ----- ----- - -----------------
    ------ -
      ---- -------------- -------- --------- ----------- ----- -------- ---- ------- -- --
    --
  -
-

----- --- ------- --------------- -
  -------- -
    ------ -
      ---- -------- ------- ------ ---
        ------ ------------- -- -
          ---- ------------- --
        ----
      ------
    --
  -
-

高阶组件模式

高阶组件（Higher Order Component，简称 HOC）是一种函数，它接收一个组件并返回一个新的增强版组件。使用 HOC 的主要好处在于可以将某些代码逻辑从一个组件中抽离出来，在需要的时候可以轻松地重用。

下面是一个例子，其中 withFetch 是一个 HOC，它将数据获取逻辑提取到一个单独的组件中。

-------- -------------- -
  ------ -------------------------- -
    ----- --------- ------- --------------- -
      ------------------ -
        -------------

        ---------- - -
          ----- -----
          ---------- -----
          ------ ----
        --
      -

      ------------------- -
        ----------
          -------------- -- ----------------
          ---------- --
            ---------------
              ----- -----
              ---------- -----
            --
          -
          ------------ --
            ---------------
              ------ ------
              ---------- -----
            --
          --
      -

      -------- -
        ------ ----------------- --------------- --------------- ---
      -
    -

    ------ ----------
  --
-

----- ----------- ------- --------------- -
  -------- -
    -- ---------------------- -
      ------ ----------------------
    -

    -- ------------------ -
      ------ ------------------
    -

    ------ -
      ----
        ------------------------- -- -
          --- ------------------------------
        ---
      -----
    --
  -
-

----- -------------------- - --------------------------------------------------

受控组件与非受控组件

React 中的表单元素可以是受控（controlled）的或者是非受控（uncontrolled）的。受控组件需要通过状态来更新表单

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/10943

react-bits-CN 中文版的

React Bits 中文版：深入了解 React 的核心概念

Render Props 模式

高阶组件模式

受控组件与非受控组件