Javascript React组件的实例

我有这个应用程序组件：

function App() {
  const [ active, setActive ] = useState('student')
  const [ row, setRow ] = useState(true)
  const [ currentComponent, setCurrentComponent ] = useState(<Table setRow={setRow} represent="students" />)
  const [ contextData, setContextData ] = useState({});

  useEffect(() => {
    switch (active) {
      case 'student':
        setCurrentComponent(<Table setRow={setRow} represent="students" />)
        return
      case 'employee':
        setCurrentComponent(<Table setRow={setRow} represent="employees" />)
        return
      case 'class':
        setCurrentComponent(<div>class</div>)
        return
    }
  }, [ active ])

  return (
    <appContext.Provider value={{ contextData, setContextData }} >
        <div className="App">
          { row ? <TabRow setActive={setActive} active={active} /> : "" }
          { currentComponent }
        </div>
    </appContext.Provider>
  );
}

函数应用程序（）{
const[active，setActive]=useState（'student'）
const[row，setRow]=useState（true）
常量[currentComponent，setCurrentComponent]=useState（）
const[contextData，setContextData]=useState（{}）；
useffect（（）=>{
开关（主动）{
案例“学生”：
setCurrentComponent（）
返回
“雇员”一案：
setCurrentComponent（）
返回
案例“类”：
setCurrentComponent（类）
返回
}
}，[活动]）
返回(
{row？：“”}
{currentComponent}
);
}

---

我刚刚意识到表组件不会在“student”为活动状态和“employee”为活动状态之间装载和卸载。这是否意味着组件仅在道具更改后重新渲染？

渲染的组件不应以状态存储，这将导致React中出现意外行为。确保所有组件始终渲染，并且仅将非组件存储在以下状态：

• 看

函数应用程序（）{
const[active，setActive]=useState（'student'）
const[row，setRow]=useState（true）
const[contextData，setContextData]=useState（{}）；
让电流分量；
开关（主动）{
“雇员”一案：
currentComponent=
返回
案例“类”：
currentComponent=类
返回
案例“学生”：
违约：
currentComponent=
返回
}
返回(
{row？：“”}
{currentComponent}
);
}

请显示

部件代码。由

useffect

指定的副作用只有在

active

prop更改为其他值时才会触发。如果调用

setActive

并将active从

student

更改为

employee

，则会触发效果，并根据开关执行其中一个

setCurrentComponent

。然后，组件将在状态更改后重新加载