React夯实基础

// 类组件
class MyComponent extends React.Component {
  componentDidMount() {
    this.fetchData();
  }
 
  componentDidUpdate(prevProps, prevState) {
    if (this.props.id !== prevProps.id) {
      this.fetchData();
    }
  }
 
  componentWillUnmount() {
    // 取消请求
  }
 
  fetchData() {
    // AJAX 请求逻辑
  }
 
  render() {
    // 渲染逻辑
  }
}
 
// Hooks
function MyComponent({ id }) {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    let isMounted = true;
 
    const fetchData = async () => {
      try {
        const response = await fetch(`/api/data/${id}`);
        if (isMounted) {
          const result = await response.json();
          setData(result);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
 
    fetchData();
 
    return () => {
      isMounted = false;
      // 取消请求
    };
  }, [id]);
 
  return (
    // 渲染逻辑
  );
}
 

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
 
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}
 
 

import React, { useState, useEffect, useCallback } from 'react'
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom'
 
// 步骤1：创建身份验证上下文
const AuthContext = React.createContext(null)
 
// 步骤2：创建自定义 Hook 管理认证状态
const useAuth = () => {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)
 
  // 使用 useCallback 缓存函数避免重复创建
  const login = useCallback(async (credentials) => {
    try {
      // 模拟异步登录请求
      const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify(credentials),
      })
      const userData = await response.json()
      setUser(userData)
    } catch (error) {
      setUser(null)
      throw error
    }
  }, [])
 
  const logout = useCallback(() => {
    // 同步清理操作
    setUser(null)
    localStorage.removeItem('token')
  }, [])
 
  // 在挂载时检查认证状态（演示 useEffect 异步操作）
  useEffect(() => {
    let isMounted = true // 防止组件卸载后设置状态
    const abortController = new AbortController()
 
    const checkAuth = async () => {
      try {
        // 模拟 token 验证请求
        const response = await fetch('/api/check-auth', {
          signal: abortController.signal,
        })
        const data = await response.json()
 
        if (isMounted) {
          setUser(data.user)
        }
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error('Auth check failed:', error)
        }
      } finally {
        if (isMounted) {
          setLoading(false)
        }
      }
    }
 
    checkAuth()
 
    // 清理函数：取消未完成的请求
    return () => {
      isMounted = false
      abortController.abort()
    }
  }, []) // 空依赖数组表示只运行一次
 
  return { user, loading, login, logout }
}
 
// 步骤3：路由守卫组件
const PrivateRoute = ({ children, requiredRoles }) => {
  const location = useLocation()
  const auth = React.useContext(AuthContext)
 
  // 处理加载状态
  if (auth.loading) {
    return <div>Loading authentication...</div>
  }
 
  // 条件判断逻辑
  if (!auth.user) {
    // 保存来源地址以便登录后跳转
    return <Navigate to="/login" state={{ from: location }} replace />
  }
 
  if (requiredRoles && !requiredRoles.includes(auth.user.role)) {
    return <Navigate to="/unauthorized" replace />
  }
 
  return children
}
 
// 步骤4：页面组件
const LoginPage = () => {
  const auth = React.useContext(AuthContext)
  const [isLoggingIn, setIsLoggingIn] = useState(false)
  const location = useLocation()
 
  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsLoggingIn(true)
 
    try {
      await auth.login({
        /* 登录凭据 */
      })
      // 登录成功后跳转到原地址或首页
      const from = location.state?.from?.pathname || '/'
      return <Navigate to={from} replace />
    } finally {
      setIsLoggingIn(false)
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      {/* 登录表单内容 */}
      <button disabled={isLoggingIn}>{isLoggingIn ? 'Logging in...' : 'Login'}</button>
    </form>
  )
}
 
const DashboardPage = () => <h1>Dashboard</h1>
const AdminPage = () => <h1>Admin Panel</h1>
 
// 步骤5：应用主组件
const App = () => {
  const auth = useAuth()
 
  return (
    <AuthContext.Provider value={auth}>
      <Router>
        <Routes>
          {/* 公开路由 */}
          <Route path="/login" element={<LoginPage />} />
 
          {/* 需要认证的路由 */}
          <Route
            path="/dashboard"
            element={
              <PrivateRoute>
                <DashboardPage />
              </PrivateRoute>
            }
          />
 
          {/* 需要管理员权限的路由 */}
          <Route
            path="/admin"
            element={
              <PrivateRoute requiredRoles={['admin']}>
                <AdminPage />
              </PrivateRoute>
            }
          />
 
          <Route path="*" element={<Navigate to="/dashboard" replace />} />
        </Routes>
      </Router>
    </AuthContext.Provider>
  )
}
 
export default App

import React, { useState } from 'react'
 
function ControlledComponent() {
  const [value, setValue] = useState('')
 
  const handleChange = (e) => {
    setValue(e.target.value)
  }
 
  return <input type="text" value={value} onChange={handleChange} />
}

import React, { useRef } from 'react'
 
function UncontrolledComponent() {
  const inputRef = useRef(null)
 
  const handleSubmit = (e) => {
    e.preventDefault()
    const value = inputRef.current.value
    console.log(value)
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  )
}

// 父组件
function ParentComponent() {
  const message = 'Hello from Parent'
  return <ChildComponent message={message} />
}
 
// 子组件
function ChildComponent(props) {
  return <div>{props.message}</div>
}

// 父组件
class ParentComponent extends React.Component {
  componentDidMount() {
    this.childRef.focus()
  }
 
  render() {
    return <ChildComponent ref={(ref) => (this.childRef = ref)} />
  }
}
 
// 子组件
class ChildComponent extends React.Component {
  focus() {
    // 自定义方法
  }
}

// 父组件
function ParentComponent() {
  const handleUpdate = (data) => {
    console.log(data)
  }
 
  return <ChildComponent onUpdate={handleUpdate} />
}
 
// 子组件
function ChildComponent(props) {
  return <button onClick={() => props.onUpdate('Data from Child')}>Update</button>
}

// 父组件
function ParentComponent() {
  const handleClick = (e) => {
    console.log('Event bubbled up', e.target.value)
  }
 
  return (
    <div onClick={handleClick}>
      <ChildComponent />
    </div>
  )
}
 
// 子组件
function ChildComponent() {
  return <button value="Child Data">Click Me</button>
}

// 子组件
function ChildComponent(props, ref) {
  useImperativeHandle(ref, () => ({
    focus: () => {
      // 自定义方法
    },
  }))
 
  return <div>Child Component</div>
}
 
const ForwardedChild = forwardRef(ChildComponent)
 
// 父组件
function ParentComponent() {
  const childRef = useRef()
 
  return (
    <div>
      <ForwardedChild ref={childRef} />
      <button onClick={() => childRef.current.focus()}>Focus Child</button>
    </div>
  )
}

// 父组件
function ParentComponent() {
  const [sharedState, setSharedState] = useState('Initial Data')
 
  return (
    <div>
      <ChildComponentA data={sharedState} onUpdate={setSharedState} />
      <ChildComponentB data={sharedState} />
    </div>
  )
}
 
// 子组件 A
function ChildComponentA(props) {
  return <button onClick={() => props.onUpdate('Updated Data')}>Update</button>
}
 
// 子组件 B
function ChildComponentB(props) {
  return <div>{props.data}</div>
}

function ChildComponent(props) {
  // 错误：不能直接修改 props
  // props.name = "New Name";
 
  // 正确：通过回调函数传递数据
  function handleUpdate() {
    props.onUpdate('New Name')
  }
 
  return <button onClick={handleUpdate}>Update Name</button>
}

import React, { useState } from 'react'
import ChildComponent from './ChildComponent'
 
function ParentComponent() {
  const [user, setUser] = useState({
    name: 'John Doe',
    age: 30,
  })
 
  // 回调函数，用于更新用户数据
  const handleUpdateUser = (newUser) => {
    setUser(newUser)
  }
 
  return (
    <div>
      <h1>Parent Component</h1>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <ChildComponent user={user} onUpdateUser={handleUpdateUser} />
    </div>
  )
}
 
export default ParentComponent

import React from 'react'
 
function ChildComponent(props) {
  // 子组件不能直接修改 props.user
  // 通过调用父组件传递的回调函数来请求更新
  const handleUpdate = () => {
    const newUser = {
      ...props.user, // 复制原始对象
      age: props.user.age + 1, // 更新年龄
    }
    props.onUpdateUser(newUser) // 调用回调函数，将新数据传递回父组件
  }
 
  return (
    <div>
      <h2>Child Component</h2>
      <p>Name: {props.user.name}</p>
      <p>Age: {props.user.age}</p>
      <button onClick={handleUpdate}>Update Age</button>
    </div>
  )
}
 
export default ChildComponent

import PropTypes from 'prop-types'
 
function ChildComponent(props) {
  return <h1>Hello, {props.name}!</h1>
}
 
ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
}

function ChildComponent(props) {
  return <h1>Hello, {props.name}!</h1>
}
 
ChildComponent.defaultProps = {
  name: 'Guest',
}

import React, { useState, useEffect } from 'react';
 
// 错误写法
const MyComponent = ({ condition }) => {
  // 不要在条件语句中调用 hooks
  if (condition) {
    const [state, setState] = useState(0);
  }
 
  return <div>My Component</div>;
};
 
// 正确写法
const MyComponent = ({ condition }) => {
  const [state, setState] = useState(0);
 
  useEffect(() => {
    if (condition) {
      // 根据 condition 执行副作用
    }
  }, [condition]);
 
  return <div>My Component</div>;
};
 

import { useState, useEffect } from 'react'
 
const useCustomHook = () => {
  const [state, setState] = useState(0)
 
  useEffect(() => {
    // 处理副作用
  }, [])
 
  return [state, setState]
}

 
import React from 'react';
import useCustomHook from './useCustomHook';
 
const MyComponent = () => {
  const [state, setState] = useCustomHook();
 
  return <div>{state}</div>;
};
 

import React, { useState } from 'react'
 
const ChildComponent = ({ propValue }) => {
  console.log('ChildComponent is called')
  return <div>{propValue}</div>
}
 
const ParentComponent = () => {
  const [stateValue, setStateValue] = useState(0)
 
  return (
    <div>
      <ChildComponent propValue={stateValue} />
      <button onClick={() => setStateValue(stateValue + 1)}>Increment</button>
    </div>
  )
}
 
export default ParentComponent

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <MainContent />
        <Footer />
      </div>
    );
  }
}

A
├── B
│   └── D
└── C

// 编译前
const dom = (
  <ChildA />
  <ChildB />
  <ChildC />
);
 
// 编译后
const dom = (
  React.createElement(ChildA),
  React.createElement(ChildB),
  React.createElement(ChildC)
);
 

// 编译前
const dom = (
  <div>
    <ChildA />
    <ChildB />
    <ChildC />
  </div>
)
 
// 编译后
function MyComponent() {
  return React.createElement(
    'div',
    null,
    React.createElement(ChildA),
    React.createElement(ChildB),
    React.createElement(ChildC)
  )
}

// 编译前
const dom = (
  <React.Fragment>
    <ChildA />
    <ChildB />
    <ChildC />
  </React.Fragment>
)
 
// 编译后
function MyComponent() {
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(ChildA),
    React.createElement(ChildB),
    React.createElement(ChildC)
  )
}

const dom = (
  <>
    <ChildA />
    <ChildB />
    <ChildC />
  </>
)

console.log(
  <>
    <div>1</div>
    <div>2</div>
  </>
)
// 输出:
// {
//   type: Symbol('react.fragment'),
//   ...
// }

import React from 'react';
 
// 高阶组件：日志记录功能
const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }
 
    componentWillUnmount() {
      console.log(`Component ${WrappedComponent.name} unmounted`);
    }
 
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};
 
// 原始组件
const MyComponent = () => {
  return <div>My Component</div>;
};
 
// 使用HOC增强组件
const EnhancedComponent = withLogging(MyComponent);
 
// 使用增强后的组件
export default EnhancedComponent;
 

import React from 'react';
 
// 高阶组件：权限控制
const withPermission = (WrappedComponent, requiredPermission) => {
  return class extends React.Component {
    render() {
      const { permissions } = this.props;
      if (!permissions.includes(requiredPermission)) {
        return <div>Access Denied</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
};
 
// 原始组件
const AdminPanel = () => {
  return <div>Admin Panel Content</div>;
};
 
// 使用HOC增强组件
const ProtectedAdminPanel = withPermission(AdminPanel, 'admin');
 
// 使用增强后的组件
export default ProtectedAdminPanel;
 

 
import React from 'react';
 
// 高阶组件：状态提升
const withState = (WrappedComponent, initialState) => {
  return class extends React.Component {
    state = initialState;
 
    render() {
      return <WrappedComponent {...this.props} state={this.state} />;
    }
  };
};
 
// 原始组件
const Counter = ({ state }) => {
  return (
    <div>
      <h1>Count: {state.count}</h1>
      <button onClick={() => state.setCount(state.count + 1)}>Increment</button>
    </div>
  );
};
 
// 使用HOC增强组件
const StatefulCounter = withState(Counter, {
  count: 0,
  setCount: (newCount) => this.setState({ count: newCount }),
});
 
// 使用增强后的组件
export default StatefulCounter;
 
 

import React from 'react';
 
// 高阶组件：默认Props
const withDefaultProps = (WrappedComponent, defaultProps) => {
  return class extends React.Component {
    render() {
      return <WrappedComponent {...this.props} {...defaultProps} />;
    }
  };
};
 
// 原始组件
const Greeting = ({ name, message }) => {
  return <div>{message} {name}!</div>;
};
 
// 使用HOC增强组件
const DefaultGreeting = withDefaultProps(Greeting, {
  message: 'Hello',
});
 
// 使用增强后的组件
export default DefaultGreeting;
 

import React, { PureComponent } from 'react';
 
class PureComp extends PureComponent {
  render() {
    console.log('PureComp rendered');
    return <div>Pure Component</div>;
  }
}
 
export default PureComp;
 

import React from 'react';
 
const ListComponent = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};
 
export default ListComponent;
 

 
import React, { useState } from 'react';
 
const NestedStateComponent = () => {
  // 初始化状态
  const [state, setState] = useState({
    user: {
      name: 'John Doe',
      address: {
        city: 'New York',
        zip: '10001'
      }
    }
  });
 
  // 更新城市属性的函数
  const updateCity = () => {
    // 使用扩展运算符创建状态的副本
    setState(prevState => ({
      ...prevState,
      user: {
        ...prevState.user,
        address: {
          ...prevState.user.address,
          city: 'San Francisco'
        }
      }
    }));
  };
 
  return (
    <div>
      <h1>{state.user.name}</h1>
      <h2>{state.user.address.city}</h2>
      <button onClick={updateCity}>Update City</button>
    </div>
  );
};
 
export default NestedStateComponent;
 

import React, { useState, memo } from 'react';
 
// 使用 React.memo 包装 ChildComponent
const ChildComponent = memo(({ data }) => {
  console.log('ChildComponent rendered');
  return <div>{data.name}</div>;
});
 
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [data, setData] = useState({ name: 'John' });
 
  const incrementCount = () => {
    setCount(count + 1);
  };
 
  return (
    <div>
      <button onClick={incrementCount}>Increment Count</button>
      <p>Count: {count}</p>
      <ChildComponent data={data} />
    </div>
  );
};
 
export default ParentComponent;
 

// 使用 useCallback 和 React.memo 来优化子组件渲染的代码示例：
import React, { useState, useCallback, memo } from 'react';
 
// 使用 React.memo 包装 ChildComponent
const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Child Button</button>;
});
 
const ParentComponent = () => {
  const [count, setCount] = useState(0);
 
  // 使用 useCallback 记忆 handleClick 函数
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []); // 依赖数组为空，确保函数只创建一次
 
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};
 
export default ParentComponent;
 
 

import React, { Suspense } from 'react'
import { render } from 'react-dom'
 
// 懒加载组件
const OtherComponent = React.lazy(() => import('./OtherComponent'))
 
function App() {
  return (
    <div>
      <h1>主组件</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  )
}
 
render(<App />, document.getElementById('root'))

const OtherComponent = React.lazy(() => import('./OtherComponent'))

class ErrorBoundary extends React.Component {
  state = { hasError: false }
 
  static getDerivedStateFromError(error) {
    return { hasError: true }
  }
 
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>
    }
    return this.props.children
  }
}
 
function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </ErrorBoundary>
  )
}

const LazyComponent = React.lazy(() => import('./LazyComponent'))
 
// 预加载
LazyComponent.preload = () => {
  return import('./LazyComponent')
}
 
// 在需要时预加载
LazyComponent.preload()

const Component1 = React.lazy(() => import('./Component1'))
const Component2 = React.lazy(() => import('./Component2'))
 
function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading Component 1...</div>}>
        <Component1 />
      </Suspense>
      <Suspense fallback={<div>Loading Component 2...</div>}>
        <Component2 />
      </Suspense>
    </div>
  )
}

const { count } = { count: 0 } // 可能与其他对象属性冲突

function Counter() {
  const [count, setCount] = useState(0);
 
  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 仍然是旧值
  };
 
  return <button onClick={handleClick}>Click me: {count}</button>;
}
 

// React 18+ 使用 flushSync 强制同步更新
import { flushSync } from 'react-dom'
 
const handleClick = () => {
  flushSync(() => {
    setCount(count + 1) // 立即更新
  })
  console.log(count) // 可获取新值
}

setCount((prevCount) => prevCount + 1)

function useState(initialState) {
  return useReducer(basicStateReducer, initialState)
}
 
function basicStateReducer(state, action) {
  // 如果传入的是函数，则调用它获得下一个 state，否则直接返回 action
  return typeof action === 'function' ? action(state) : action
}

// ReactFiberHooks.js
function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current
  return dispatcher
}
 
function useState(initialState) {
  const dispatcher = resolveDispatcher()
  return dispatcher.useState(initialState)
}
 
function useReducer(reducer, initialArg, init) {
  const dispatcher = resolveDispatcher()
  return dispatcher.useReducer(reducer, initialArg, init)
}

function mountState(initialState) {
  // 创建一个新的 hook，并挂载到当前正在渲染的 fiber 上
  const hook = mountWorkInProgressHook()
 
  // 如果 initialState 为函数，则调用它以获得初始状态
  hook.memoizedState = typeof initialState === 'function' ? initialState() : initialState
 
  // 初始化更新队列
  hook.queue = {
    pending: null, // 待处理的更新（以循环链表存储）
    dispatch: null, // 更新函数
    last: null, // 指向最后一个更新
  }
 
  // 创建并绑定 dispatch 函数，后续用于添加更新
  const dispatch = (hook.queue.dispatch = dispatchAction.bind(
    null,
    currentlyRenderingFiber,
    hook.queue
  ))
 
  return [hook.memoizedState, dispatch]
}

function updateState(initialState) {
  // 找到对应的 hook
  const hook = updateWorkInProgressHook()
  const queue = hook.queue
  const pending = queue.pending
 
  if (pending !== null) {
    let newState = hook.memoizedState
    // pending 是一个循环链表，依次应用每个更新
    let first = pending.next
    let update = first
    do {
      const action = update.action
      // 通过 reducer 计算下一个 state
      newState = typeof action === 'function' ? action(newState) : action
      update = update.next
    } while (update !== first)
 
    hook.memoizedState = newState
    // 清空更新队列
    queue.pending = null
  }
 
  return [hook.memoizedState, queue.dispatch]
}

import { renderToString } from 'react-dom/server'
import App from './App'
 
const data = fetchData() // 服务端数据预取
const html = renderToString(<App data={data} />)
const finalHTML = `
  <html>
    <body>
      <div id="root">${html}</div>
      <script>window.__INITIAL_DATA__ = ${JSON.stringify(data)}</script>
    </body>
  </html>
`

%% SSR 核心流程示意图
graph TD
    A[客户端请求] --> B{服务端处理}
    subgraph 服务端
        B --> C[路由匹配]
        C --> D[数据预取]
        D --> E[组件渲染为 HTML]
        E --> F[数据序列化注入 HTML]
        F --> G[输出完整 HTML]
    end
    subgraph 客户端
        G --> H[浏览器解析 HTML/CSS]
        H --> I[加载客户端 JS]
        I --> J[数据复用与 Hydration]
        J --> K[绑定事件与交互]
        K --> L[完整单页应用]
    end
 
 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

import { AliveScope } from 'react-activation'
 
function App() {
  return (
    <AliveScope>
      <Router>{/* 路由配置 */}</Router>
    </AliveScope>
  )
}

import { KeepAlive } from 'react-activation'
 
function HomePage() {
  return (
    <KeepAlive key="UniqueHomeKey">
      <ExpensiveComponent />
    </KeepAlive>
  )
}

import { useAliveController } from 'react-activation'
 
function ClearCacheButton() {
  const { drop } = useAliveController()
  return <button onClick={() => drop('UniqueHomeKey')}>清除 Home 缓存</button>
}

// 应用 Diff 结果
function patch(parentDom, patches) {
  patches.forEach((patch) => {
    switch (patch.type) {
      case 'REPLACE':
        const newDom = render(patch.newNode)
        parentDom.replaceChild(newDom, parentDom.firstChild)
        break
      case 'UPDATE':
        // 更新属性
        Object.entries(patch.propPatches).forEach(([key, value]) => {
          if (value === null) {
            patch.dom.removeAttribute(key)
          } else {
            patch.dom.setAttribute(key, value)
          }
        })
        // 递归更新子节点
        patchChildren(patch.dom, patch.childPatches)
        break
      case 'MOVE':
        const movedNode = parentDom.childNodes[patch.from]
        const targetNode = parentDom.childNodes[patch.to]
        parentDom.insertBefore(movedNode, targetNode)
        break
      case 'INSERT':
        const newDom = render(patch.newNode)
        parentDom.appendChild(newDom)
        break
      case 'DELETE':
        parentDom.removeChild(patch.oldChild.dom)
        break
    }
  })
}

flowchart TD
    A[开始Diff比较] --> B{同一层级比较?}
    B -->|是| C[比较节点类型]
    B -->|否| D[销毁旧节点，创建新节点]
    C --> E{类型相同?}
    E -->|是| F[更新节点属性]
    E -->|否| G[销毁旧节点，创建新节点]
    F --> H[处理子节点]
    H --> I{是否有子节点?}
    I -->|是| J[生成新旧子节点Key Map]
    I -->|否| K[结束]
    J --> L[遍历旧子节点]
    L --> M{新列表中存在相同Key?}
    M -->|是| N[移动节点到新位置]
    M -->|否| O[删除旧节点]
    N --> P[递归执行Diff]
    O --> Q[继续遍历]
    Q --> R{是否遍历完成?}
    R -->|否| L
    R -->|是| S[创建新增节点]
    S --> T[结束]
 
 

// 虚拟 DOM 节点结构
class VNode {
  constructor(type, props, key) {
    this.type = type // 节点类型（如 'div'）
    this.props = props // 属性对象（含 children）
    this.key = key // 唯一标识
    this.dom = null // 对应的真实 DOM
  }
}
 
// Diff 入口函数
function diff(oldNode, newNode) {
  // 1. 节点类型不同：直接替换
  if (oldNode.type !== newNode.type) {
    return { type: 'REPLACE', newNode }
  }
 
  // 2. 更新属性
  const propPatches = diffProps(oldNode.props, newNode.props)
 
  // 3. Diff 子节点（核心）
  const childPatches = diffChildren(oldNode.props.children, newNode.props.children)
 
  return {
    type: 'UPDATE',
    propPatches,
    childPatches,
  }
}
 
// 属性比较
function diffProps(oldProps, newProps) {
  const patches = {}
 
  // 更新修改的属性
  for (const key in newProps) {
    if (key !== 'children' && oldProps[key] !== newProps[key]) {
      patches[key] = newProps[key]
    }
  }
 
  // 删除移除的属性
  for (const key in oldProps) {
    if (key !== 'children' && !(key in newProps)) {
      patches[key] = null // 标记删除
    }
  }
 
  return patches
}
 
// 子节点比较（含 Key 优化）
function diffChildren(oldChildren, newChildren) {
  const patches = []
 
  // 构建旧子节点 Key 映射表
  const oldKeyMap = {}
  oldChildren.forEach((child, index) => {
    const key = child.key || index
    oldKeyMap[key] = child
  })
 
  let lastIndex = 0
  newChildren.forEach((newChild, newIndex) => {
    const key = newChild.key || newIndex
    const oldChild = oldKeyMap[key]
 
    if (oldChild) {
      // 存在相同 Key：递归 Diff
      patches.push(diff(oldChild, newChild))
 
      // 判断是否需要移动
      if (oldChild._index < lastIndex) {
        patches.push({ type: 'MOVE', from: oldChild._index, to: newIndex })
      }
      lastIndex = Math.max(lastIndex, oldChild._index)
    } else {
      // 新增节点
      patches.push({ type: 'INSERT', newNode: newChild })
    }
  })
 
  // 标记删除的旧节点
  oldChildren.forEach((oldChild, index) => {
    if (!newChildren.some((newChild) => newChild.key === oldChild.key)) {
      patches.push({ type: 'DELETE', oldChild })
    }
  })
 
  return patches
}

import React, { useState, useEffect, useCallback, useMemo, memo } from 'react'
 
// 1. 只能在 React 函数中使用 ✅
const HookDemo = () => {
  // 2. 必须在最外层调用 ✅
  const [count, setCount] = useState(0)
  const [user, setUser] = useState({
    name: 'Alice',
    preferences: [],
  })
 
  // 3. 更新引用类型必须返回新引用 ✅
  const updateUser = () => {
    // 正确做法：创建新对象
    setUser((prev) => ({
      ...prev,
      age: 25,
    }))
 
    // 错误示范（不会触发更新）：
    // user.age = 25;
    // setUser(user);
  }
 
  // 4. 避免 useEffect 无限循环 ✅
  useEffect(() => {
    // 正确：添加条件判断
    if (count < 10) {
      setCount((c) => c + 1)
    }
  }, [count]) // 确保依赖数组正确
 
  // 5. 清理副作用 ✅
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Timer tick')
    }, 1000)
 
    return () => clearInterval(timer)
  }, [])
 
  // 6. 正确处理异步操作 ✅
  useEffect(() => {
    const fetchData = async () => {
      try {
        // 模拟 API 请求
        const response = await fetch('https://api.example.com/data')
        const data = await response.json()
        console.log(data)
      } catch (error) {
        console.error('Fetch error:', error)
      }
    }
 
    fetchData()
  }, [])
 
  // 7. 使用 useCallback 优化 ✅
  const handleClick = useCallback(() => {
    console.log('Button clicked:', count)
  }, [count]) // 依赖数组保证最新值
 
  // 8. 使用 useMemo 优化计算 ✅
  const filteredList = useMemo(() => {
    // 模拟复杂计算
    return Array.from({ length: 10000 }, (_, i) => i).filter((num) => num % count === 0)
  }, [count])
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
 
      <MemoizedChildComponent onClick={handleClick} />
    </div>
  )
}
 
// 配合 useCallback 的 memo 组件
const ChildComponent = ({ onClick }) => {
  return <button onClick={onClick}>Child Button</button>
}
const MemoizedChildComponent = memo(ChildComponent)
 
export default HookDemo

// 类组件
class App extends React.Component {
  constructor(props) {
    super(props)
    this.ref = React.createRef()
  }
  render() {
    return <div ref={this.ref}></div>
  }
}

// 函数组件
 
const App = () => {
  const ref = React.useRef()
  return <div ref={ref}></div>
}

// 类组件
class App extends React.Component {
  bindRef = (ele) => {
    this.bodyRef = ele
  }
  render() {
    return <div ref={this.bindRef}></div>
  }
}

// 函数组件
const App = () => {
  const bindRef = React.useCallback((ele) => {
    // 处理逻辑
  }, [])
  return <div ref={bindRef}></div>
}

class App extends React.Component {
  render() {
    return <div ref="bodyRef"></div>
  }
}

class ChildComponent extends React.Component {}
 
const App = () => {
  const ref = React.useRef()
  return <ChildComponent ref={ref} />
}

import { forwardRef, useImperativeHandle } from 'react'
 
const ChildComponent = React.forwardRef((props, ref) => {
  useImperativeHandle(ref, () => {
    // 返回要暴露的接口
    return {
      customMethod: () => console.log('Custom method called'),
    }
  }, [])
  return <div>Child Component</div>
})
 
const App = () => {
  const ref = React.useRef()
  return <ChildComponent ref={ref} />
}