最近我阅读了React官方文档，发现了很多新颖的想法。我认为在自学React的过程中，可能会忽略许多类似的技巧，所以今天我想整理一些相关技巧。

我們希望盡可能簡潔地在這篇文章中介紹，如果您想要更詳細的了解，可以點擊連結查看。

另外，基本上我们是使用最新版的 React 18 进行操作验证。

反应.碎片

组件应该返回JSX.Element，但使用React.Fragment可以将多个元素连接在一起返回。

return (
  <>
    <h1>My Profile</h1>
    <p>I am an office worker.</p>
  </>
);

以上的代码是以下代码的简写形式。

return (
  <React.Fragment>
    <h1>My Profile</h1>
    <p>I am an office worker.</p>
  </React.Fragment>
);

在使用循环时，在 React.Fragment 上指定 key 属性。

{products.map((product) =>
  <React.Fragment key={product.id}>
    <h2>{product.name}</h2>
    <p>{product.description}</p>
  </React.Fragment>
}

通过逻辑和运算符实现的条件渲染。

在JSX中，可以使用&&运算符来实现以下类似的写法。

{ condition && expression }

例如，过去我们可能会用三元操作符来写下述的表达式。

  {notifications.length >= 0
-     ? <span class="badge">{notifications.length}</span>
-     : <></>
+     && <span class="badge">{notifications.length}</span>
  }

在JSX中，如果表达式返回false，React将不会渲染任何内容。同样，如果返回true、null或undefined，也不会有任何内容被渲染。

听说如果使用 TypeScript 和 eslint，最好启用 strict-boolean-expressions。

事件目标名称

在React中，当表单的值被更新时，可能会编写以下类型的事件处理程序。在下面的示例代码中，有一个用于指定name和email的文本框，当它们的值被更新时，假设会调用这些函数。

const [name, setName] = useState('');
const [email, setEmail] = useState('');

function handleChangeName(event) {
  setName(event.target.value);
}

function handleChangeEmail(event) {
  setEmail(event.target.value);
}

也许可以通过使用event.target.name将事件处理程序整合在一起。

const [formData, setFormData] = useState({ name: '', email: '' });

function handleChangeText(event) {
  const newFormData = {...formData};
  newFormData[event.target.name] = event.target.value;
  setFormData(newFormData);
}

此外，在官方文件中，使用计算属性名称来编写。如果使用计算属性名称来重写上述示例，将会变成以下的样子。

function handleChangeText(event) {
  setFormData({...formData, [event.target.name]: event.target.value});
}

选择标签和文本区标签的 value 属性

在 select 标签和 textarea 标签中，添加了 value 属性，这在 HTML 中本应该不存在。

 

此外，对于 input[type=”checkbox”] 和 input[type=”radio”] 标签，现在也可以指定 checked 属性。

 

通过这样做，可以消除冗长的代码，并轻松管理受控组件。

<select value={selectedItem}>
  <option value="strawberry">イチゴ</option>
  <option value="mint">ミント</option>
  <option value="chocolate">チョコレート</option>
</select>
<textarea value={myVeryLongText} />
<input type="checkbox" checked={isChecked} />チェックボックス

组件的子元素

在React中，你可以使用特殊的props称为children。被包含在标签中的子元素可以通过props.children来接收，并自由地放置在组件内。

<FancyBorderComponent>
  <h1>Hello World</h1>
  Welcome to React!
</FancyBorderComponent>

// コンテンツに派手なボーダーを追加する
function FancyBorderComponent(props) {
  return (
    <div class="fancy-border">
      {props.children}
    </div>
  );
}

如果您正在使用TypeScript，建议将props.children指定为React.Node类型。

如果省略样式单位，默认为 px。

在CSS中，无法省略除了0以外的数字单位，但在React中可以省略。

另外，根据CSS属性的不同，有些情况下会自动添加单位，而有些情况下则不会。如果指定为字符串类型，那么就可以确保不会加上单位，因此如果不想加单位，我认为这是最可靠的选择。

您可以将字符串或数字作为值传递。如果您传递一个数字，比如宽度: 100，React将自动将px（“像素”）附加到该值上，除非它是一个无单位的属性。

 

<div style={{ height: 150, padding: 50, opacity: 0.5, backgroundColor: 'red' }}>
  Hello World!
</div>
<div className="hello-world">
  Hello World!
</div>

.hello-world {
  height: 150px;
  padding: 50px;
  opacity: 0.5;
  background-color: blue;
}

在自定义属性中，有些人说单位会自动添加，但在我的环境中无法复现。

自定义挂钩

可以将使用useState、useEffect等hooks的操作共享到另一个函数中。这被称为自定义hook，但在内部实际上只是一个普通的函数。

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

  const countUp = () => {
    setCount(count + 1);
  }

  const countMessage = `現在のカウントは ${count} です。`

  return [countMessage, countUp];
}

这些与其他钩子一样，可以从函数组件中调用。

function MyComponent() {
  const [countMessage, countUp] = useCount();

  return (
    <>
      { countMessage }
      <button onClick={countUp}>カウント</button>
    </>
  );
}

或许刚开始接触React时可能觉得并没有什么必要性，但当有一天真正需要的时候，请试着回想一下这句话。

可以将函数作为参数传递给 useState 的 setFoo()。

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

var handleClick = () => {
  setCount((c) => c + 1);
}

似乎可以传递一个函数作为setFoo()的参数，该函数接收旧状态并返回新状态，而不是传递新状态作为参数。由于可以使用最新的状态，因此可以连续调用setFoo()。

var handleClick = () => {
  setCount((c) => c + 1);
  setCount((c) => c + 1); // count の値が 2 増加する
}

var handleClickAlt = () => {
  setCount(count + 1);
  setCount(count + 1); // count の値は 1 しか増加しない
}

只是，我觉得可能没有太多必须使用它的场合。

上下文

你可以在整个React应用程序中创建全局变量，例如语言环境设置和UI主题设置等。请查看链接以获取更多详细信息。

 

门户

使用门户可以在DOM中的不同位置渲染子组件。例如，当在指定了overflow: hidden的组件内想要显示模态对话框时，可以使用门户。

 

总结

阅读了React官方文档，发现有很多我不知道的东西，感觉很有意思。因为是日文，所以我阅读了这里的文档，但是发现它有些过时，所以可能还有很多我不知道的最新React功能。相反，它也解释了一些不常用的函数组件功能，让我感到新鲜。虽然与本文的内容无直接关联，但我想附上一篇很有趣的文章链接，里面写了React Hooks发布时的各种情况。

 

如果有任何错误或疑问，请留下评论！