How to set initial value of jotai to atom when parent component re- render ?

在React中使用Recoil时，如果需要在父组件重新渲染时设置atom的初始值，主要有几种方法可以实现。以下是两种常见的方法：

方法一：使用Effect来重置Atom

如果你想在父组件每次渲染时都重置atom的值，可以在父组件中使用useEffect配合useSetRecoilState来实现。这样可以确保每次父组件渲染时，atom的值都会被重置为你想要的初始值。

示例代码：

javascript
import React, { useEffect } from 'react';
import { atom, useRecoilState, useSetRecoilState } from 'recoil';

const myAtom = atom({
  key: 'myAtom',
  default: 0,
});

function ParentComponent() {
  const setMyAtom = useSetRecoilState(myAtom);

  useEffect(() => {
    setMyAtom(0);  // 这里设置你想要的初始值
  }, []);  // 如果你想在父组件每次渲染时都重置，可以将依赖数组留空

  return <ChildComponent />;
}

function ChildComponent() {
  const [value, setValue] = useRecoilState(myAtom);

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

方法二：利用Key变化重置

这种方法涉及到React的key属性，当组件的key改变时，React会重新创建组件而不是复用，这样可以迫使子组件使用atom的默认值重新初始化。

示例代码：

javascript
import React, { useState } from 'react';
import { atom, useRecoilState } from 'recoil';

const myAtom = atom({
  key: 'myAtom',
  default: 0,
});

function ParentComponent() {
  const [key, setKey] = useState(0);

  const resetAtom = () => {
    setKey(prevKey => prevKey + 1);  // 改变key值
  };

  return (
    <>
      <button onClick={resetAtom}>Reset Atom</button>
      <ChildComponent key={key} />
    </>
  );
}

function ChildComponent() {
  const [value, setValue] = useRecoilState(myAtom);

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

在这两种方案中，第一种方法更适用于需要在每次父组件渲染时重置atom的场景，而第二种方法则适合于需要通过某些操作（如点击按钮）来间接重置atom的场景。选择哪种方法取决于具体的业务需求和父组件的渲染行为。