REECT：返回JSX和函数组件的函数之间的差异是什么？

Question

function renderSomething(foo) {
  return <div>sth {foo}</div>
}

function Something({ foo }) {
  return <div>sth {foo}</div>
}

function Component(props) {
  const { foo } = props
  return (
    <>
        {renderSomething(foo)}
        <Something foo={foo} />
    </>
  )
}

renderSomething() 和 的 JSX 结果是相同的。我想知道这两种方式之间有什么区别（例如渲染方式、行为、影响等）？

render方法（即renderSomething()）适用于什么场景？我可以在里面使用挂钩吗？

Answer 1

renderSomething() 和 的 JSX 结果是相同的。

renderSomething(foo) 和 做完全不同的事情，但在特定用法中，最终结果是相同的：React 创建一个 React 元素，告诉它稍后渲染一个 div （如果使用该元素）。执行 renderSomething(foo) 是将 renderSomething 视为一个钩子，这会影响您在运行时如何使用它。

这里有两个主要区别：

1. 使用renderSomething(foo)，您的代码会立即调用函数并传入参数。对于 ，您并不是在调用 Something。您要求 React 记住它，并在以后需要渲染您执行这些调用的组件时调用它。

2. 因为调用 renderSomething 的是您的代码，而不是 React，所以如果您在其中使用了钩子，它们会将信息放入调用组件的实例和状态信息中。相反，如果 Something 使用挂钩，则该实例和状态信息将存储在 Something 本身的组件实例中。

（还有其他差异。您不能通过 使用 renderSomething 作为组件，因为函数组件名称必须以大写字母开头以将它们与 HTML 元素区分开来，并且因为 renderSomething 需要一个字符串参数，而不是 props 对象。）

让我们更仔细地看看其中的几个差异：

function renderSomething(foo) {
    console.log(`renderSomething: Called with foo = ${foo}`);
    return <div>sth {foo}</div>;
};

function Something({ foo }) {
    console.log(`Something: Called with foo prop = ${foo}`);
    return <div>sth {foo}</div>;
}

console.log(`Creating elements via renderSomething("x"):`);
const ex1 = renderSomething("x");
console.log(`Creating elements via <Something foo="x" />:`);
const ex2 = <Something foo="x" />;
console.log(`Done`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

请注意，代码调用 renderSomething（您会看到它的console.log 出现），但没有调用Something （您看不到它的 console.log）。这是因为上面的差异#1。关键是组件的函数只有在需要渲染时才会被调用。我们没有渲染上面的任何结果，因此该函数永远不会被调用。

第二个区别更微妙，但让我们假设两件事：

1. 你的“东西”需要一个效果（也许它通过网络加载一些东西）（或者它可以是状态或引用或它使用钩子的任何其他东西），并且
2. 使用它的组件（我们称之为示例）可能需要也可能不需要渲染它。

这与 Something 配合得很好：

const { useState, useEffect } = React;

function Something({ foo }) {
    const [thing, setThing] = useState(null);
    useEffect(() => {
        setTimeout(() => {  // Fake ajax
            setThing("thing"); 
        }, 100);
    }, []);
    return <div>foo = {foo}, thing = {thing}</div>;
}

function App() {
    const [foo, setFoo] = useState("");

    return <div>
        <div>
            <label>
                <input type="checkbox" checked={!!foo} onChange={() => setFoo(foo => foo ? "" : "hi")} />
                Toggle "foo"
            </label>
            {foo ? <Something foo={foo} /> : null}
        </div>
    </div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

label {
    user-select: none;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

但现在让我们用 renderSomething 尝试一下：

const { useState, useEffect } = React;

function renderSomething(foo) {
    const [thing, setThing] = useState(null);
    useEffect(() => {
        setTimeout(() => {  // Fake ajax
            setThing("thing"); 
        }, 100);
    }, []);
    return <div>foo = {foo}, thing = {thing}</div>;
}

function App() {
    const [foo, setFoo] = useState("");

    return <div>
        <div>
            <label>
                <input type="checkbox" checked={!!foo} onChange={() => setFoo(foo => foo ? "" : "hi")} />
                Toggle "foo"
            </label>
            {foo ? renderSomething(foo) : null}
        </div>
    </div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

label {
    user-select: none;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

当您勾选带有此错误的框时，它会爆炸：

警告：React 检测到 App 调用的 Hook 顺序发生了变化。如果不修复，这将导致错误和错误。有关更多信息，请阅读 Hooks 规则：https://reactjs.org/link/rules-of-hooks

   上一个渲染 下一个渲染
   -------------------------------------------------- ----
1. useState 使用状态
2. 未定义的useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^

    在应用程序（<匿名>：35:22）

这是因为当我们没有在第一次渲染时调用 renderSomething 时，这会使代码调用它。这是因为上面的#2：由于 renderSomething 不是一个组件函数，它不会获得自己的组件实例，并且对其中的钩子的任何调用就像对父组件中的钩子的调用一样（示例）。但函数组件有时不允许调用钩子，有时则不允许。这是因为 React 依赖于调用 hooks 的顺序，并且该顺序使其执行钩子管理时保持一致。同样，使用 renderSomething 就是使用 renderSomething 作为钩子（这正是自定义钩子的工作原理，最终调用内置钩子，然后将信息存储在父实例）。

正如您所看到的，虽然您在示例中得到的结果是相同的，但总的来说它们是完全不同的东西。 :-)