React native 反应本机和反冲反冲根的多次重新渲染

我有这些部件，没有任何反冲钩

const C = () => {
  console.log('---->C')
  return <Text>C</Text>
}
const B = () => {
  console.log('--->B')
  return <>
    <Text>B</Text>
    <C/>
  </>
}
const A = () => {
  console.log('-->A')
  return <>
    <Text>A</Text>
    <B/>
  </>
}

const App = () => {
  console.log('->App')
  return (
    <RecoilRoot>
      <A />
    </RecoilRoot>
  );
};

现在我将使用反冲挂钩来变异并访问原子状态

import { atom, useSetRecoilState, useRecoilState, useRecoilValue, RecoilRoot } from "recoil";
const atomTest = atom({
  key: "abcatomTest",
  default: "A"
})
const C = () => {
  console.log('---->C')
  const [value, set] = useRecoilState(atomTest)
  return <>
    <Text>C</Text>
    
  </>
}
const B = () => {
  console.log('--->B')
  const set = useSetRecoilState(atomTest)

  return <>
    <Text>B</Text>
    <C/>
  </>
}
const A = () => {
  console.log('-->A')
  const value = useRecoilValue(atomTest)
  
  return <>
    <Text>A</Text>
    <B/>
  </>
}

const App = () => {
  console.log('->App')
  return (
    <RecoilRoot>
      <A />
    </RecoilRoot>
  );
};

---

为什么反冲会强制重新呈现多个组件，包括root，im根本没有改变状态，而在应用程序组件中也没有对任何状态的依赖

首先：React执行函数并不意味着组件实际上会重新呈现。 React有一个提交和呈现阶段。在提交阶段，React会进行更改并调用子组件，检查是否有新的内容要呈现。在渲染阶段，React将检查是否存在实际必须重新渲染的组件。如果输出、挂钩状态和道具相同，则不会重新渲染，即使React以前调用了您的函数组件。这就是您看到所有日志的原因。您并没有检查是否使用该选项重新渲染，而是检查函数执行

您的应用程序组件实际上与state有依赖关系，因为它呈现

RecoilRoot

组件。当该组件发生更改时，React将再次进入提交阶段并检查所有子组件，以查看是否有更改

由于每个组件都使用一个钩子来引用

atomTest

atom，因此Recoil必须为该组件订阅该atom。因此，反冲和反应都必须通过树来寻找变化

如果使用React Developer工具的探查器进行检查，您将看到没有实际的重新渲染，因为您的组件没有更改任何输出

import { atom, useSetRecoilState, useRecoilState, useRecoilValue, RecoilRoot } from "recoil";
const atomTest = atom({
  key: "abcatomTest",
  default: "A"
})
const C = () => {
  console.log('---->C')
  const [value, set] = useRecoilState(atomTest)
  return <>
    <Text>C</Text>
    
  </>
}
const B = () => {
  console.log('--->B')
  const set = useSetRecoilState(atomTest)

  return <>
    <Text>B</Text>
    <C/>
  </>
}
const A = () => {
  console.log('-->A')
  const value = useRecoilValue(atomTest)
  
  return <>
    <Text>A</Text>
    <B/>
  </>
}

const App = () => {
  console.log('->App')
  return (
    <RecoilRoot>
      <A />
    </RecoilRoot>
  );
};

 LOG  ->App
 LOG  -->A
 LOG  -->A
 LOG  ->App
 LOG  --->B
 LOG  ---->C
 LOG  ---->C
 LOG  --->B
 LOG  -->A
 LOG  ->App
 LOG  -->A
 LOG  --->B
 LOG  ---->C