React 3 个有用小 Tips 💡

大家可关注公众号 JavaScript与编程艺术

1. <></> 和 <Fragment></Fragment> 区别

前者是后者的语法糖，其实还不准确。二者还是有区别的，当有属性要加的时候只能是后者，当然属性只能是 key。

<Fragment></Fragment> 使用场景，当需要用到 key 的时候，我能想到的唯一场景就是 map 里面，否则一律使用前者。

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

更多阅读：react.dev/reference/r…

2. 如果需要让组件销毁后重建

取巧方式：使用 key

使用场景：

1. echart 的组件的曲线条数一旦渲染就只能固定，即使 setOptions 塞入了多条曲线的值。修复该问题一个取巧的办法是用组件的条数当做 key key={options.length}。
2. antd 的 Form 默认会记住表单值，可以通过 key=某个变量 来强迫其销毁状态并重建。当然 antd@5.18.0 已经提供参数 clearOnDestroy，低版本仍可使用该技巧。

3. 使用 ref 回调函数初始化 ref

你知道可以将一个函数传递给 ref 属性吗？

它的工作原理如下：

• 当 DOM 节点添加到屏幕时，React 会以 DOM 节点作为参数调用该函数。
• 当 DOM 节点被移除时，React 会以 null 调用该函数。

在下面的示例中，我们使用此技巧跳过 useEffect。

不好的写法:

使用 useEffect 当组件渲染完毕后聚焦输入框。

const FocusInput = () => {
  const ref = useRef<HTMLInputElement>();

  useEffect(() => {
    ref.current?.focus();
  }, []);

  return <input ref={ref} type="text" />;
};

推荐写法:

在输入框可用时立即聚焦，减少 useEffect 的使用。

const FocusInput = () => {
  const ref = useCallback((node) => node?.focus(), []);
  
  return <input ref={ref} type="text" />;
};

此条来自 一些react使用小技巧（上）。

公众号『JavaScript与编程艺术』

更多阅读 📚

• segmentfault.com/a/119000004…