1.26 状态提升来解决共享问题

一、状态提升解决共享问题

1. 多次渲染同一个组件，每个组件都会拥有自己的state。状态是独立的，且不共享的

2. 通过父子通信来实现状态提升(也就是同一页面两个按钮，可以同时操控同一个数据)

3. 修改后的代码：

   import { useState } from 'react'
   
   function Button({ scount, sonClick }) {
     return (
       <div>
         <button onClick={sonClick}>点击</button>
         {scount}
       </div>
     )
   }
   
   function App() {
     // 按钮内的功能提升到父组件，通过父子通信实现状态提升
     const [count, setCount] = useState(0)
     const handleClick = () => {
       setCount(count + 1)
     }
     return (
       <>
         <div>Default Template</div>
         <Button scount={count} sonClick={handleClick} />
         <Button scount={count} sonClick={handleClick} />
       </>
     )
   }
   
   export default App
   

4. 默认与状态提升后的状态图：

   

   默认与状态提升