反应避免在组件之间传播非 DOM 道具

在使用 React 的过程中，我们经常需要在组件之间传递属性，以控制组件的行为和视图。通常情况下，React 中的属性能够很好地传递到子组件中，并且可以被子组件直接取用。

但是，当我们传递的属性不是 DOM 属性时，就需要注意了。这些非 DOM 属性包括函数、对象和数组等数据类型。因为这些数据类型不能被直接序列化为字符串，所以它们不能直接被传递给子组件。如果直接传递这些属性，会导致代码清晰度下降，甚至会引起错误。

为什么要避免非 DOM 属性的传递？

因为 React 组件传递属性的过程实际上是将属性序列化成字符串的过程，然后再传递给子组件。而非 DOM 属性无法直接被序列化成字符串，所以需要进行特殊的处理。如果直接传递非 DOM 属性，会导致 React 在序列化属性时出错，从而引起组件渲染失败。

此外，直接传递非 DOM 属性还会让代码显得不够清晰，让其他开发者很难读懂代码。如果要传递非 DOM 属性，应该考虑使用其他的方法，如在 state 中存储这些属性，并通过 props 传递特殊的标识符来让子组件知道从哪里获取这些属性。

怎样避免非 DOM 属性的传递？

1. 使用 props 传递基本数据类型

如果需要传递的属性是基本数据类型，如字符串、数字或布尔值，可以直接将它们放在 props 中传递给子组件。

function MyComponent({ title }) {
  return <h1>{title}</h1>;
}

ReactDOM.render(
  <MyComponent title="Hello, World!" />,
  document.getElementById("root")
);

2. 使用 props 传递函数

如果需要传递的属性是函数，可以使用箭头函数或 bind 方法来绑定函数的作用域，避免在子组件中获取不到正确的 this。

class MyComponent extends React.Component {
  handleClick = () => {
    console.log("Clicked!");
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

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

或者，也可以将函数作为 props 传递给子组件，并在子组件内部执行该函数。

function MyComponent({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

function handleClick() {
  console.log("Clicked!");
}

ReactDOM.render(
  <MyComponent onClick={handleClick} />,
  document.getElementById("root")
);

3. 使用 props 传递对象和数组

如果需要传递的属性是对象或数组，应该将它们存储在 state 中，然后通过 props 传递给子组件。子组件可以通过 props 获取到这些属性，并从 state 中获取它们的值。

class MyComponent extends React.Component {
  state = {
    items: ["Apple", "Banana", "Orange"]
  }

  render() {
    return <MyList items={this.state.items} />;
  }
}

function MyList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

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

总结

避免在组件之间传播非 DOM 道具可以使我们的代码更加清晰易读，并且能够避免一些不必要的错误。如果需要传递非 DOM 属性，应该考虑使用其他的方法。我们在使用 React 的过程中，一定要注意这个问题。