React无状态函数组件重构后不渲染，调用方式是否与有状态组件一致？

无状态函数组件的调用方式和有状态组件完全一致，你在App类中的调用代码没有问题。

问题出在重构后的箭头函数组件上：
当箭头函数使用花括号{}包裹函数体时，必须显式使用return语句返回JSX内容。你当前的代码没有写return，导致组件默认返回undefined，React无法渲染该值，所以组件不显示，且不会抛出错误（因为返回undefined是React允许的情况）。

修正方案 #

有两种方式可以修复：

方式1：添加显式return

const Search = ({ value, onChange, children }) => {
  return (
    <form>
      {children} <input
        type="text"
        value={value}
        onChange={onChange}
      />
    </form>
  );
}

方式2：使用箭头函数的隐式返回

用圆括号()包裹JSX（让结构更清晰），省略花括号实现隐式返回：

const Search = ({ value, onChange, children }) => (
  <form>
    {children} <input
      type="text"
      value={value}
      onChange={onChange}
    />
  </form>
);

内容的提问来源于stack exchange，提问作者Alex Hoggett