React进阶

### React 进阶教程：高级用法与深入理解 #### 一、React 插槽（Portals） React 的插槽（Portals）是一种特殊的渲染机制，允许开发者将子节点渲染到 DOM 层次结构之外的位置。通过 `ReactDOM.createPortal` 方法，可以在不破坏现有组件层次的情况下，将某些 UI 元素放置在特定位置，比如模态框或工具提示。这种方法特别适用于需要脱离父容器样式影响的场景[^2]。 ```javascript const Modal = (props) => { return ReactDOM.createPortal( <div className="modal"> {props.children} </div>, document.getElementById('portal-root') // 渲染目标DOM节点 ); }; ``` --- #### 二、复杂的组件通信模式——Context API 随着应用程序规模的增长，传统的 props drilling 方式会变得繁琐且难以维护。React 提供了 Context API 来解决跨层级通信的需求。通过创建上下文对象并将其提供给后代组件，可以轻松实现全局状态共享[^3]。 以下是基于 Context 和 Hooks 实现的一个简单例子： ```javascript // 创建上下文 const ThemeContext = React.createContext(); // Provider 组件 function App() { const [theme, setTheme] = React.useState('light'); return ( <ThemeContext.Provider value={{ theme, setTheme }}> <Toolbar /> </ThemeContext.Provider> ); } // Consumer 组件 function Toolbar() { return ( <ThemeContext.Consumer> {({ theme, setTheme }) => ( <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Toggle {theme} Mode </button> )} </ThemeContext.Consumer> ); } ``` 如果使用函数组件，则可以通过 `useContext` Hook 替代 Consumer[^4]： ```javascript function Toolbar() { const { theme, setTheme } = React.useContext(ThemeContext); return ( <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Toggle {theme} Mode </button> ); } ``` --- #### 三、React 高级优化技术 为了提升性能和用户体验，React 推出了许多高级功能和技术，例如 Memoization 和 Refs。 ##### 1. **Memoization** 对于纯展示型组件，可以利用 `React.memo` 或 `shouldComponentUpdate` 减少不必要的重新渲染。这有助于提高大型列表或频繁更新区域的效率[^1]。 ```javascript const ExpensiveChild = React.memo((props) => { console.log('ExpensiveChild rendered'); return <div>{props.value}</div>; }); ``` ##### 2. **Refs** 当需要操作原生 DOM 节点或者访问子组件实例时，可以借助 `useRef` 或类组件中的 `ref` 属性来完成任务。 ```javascript const inputEl = useRef(null); const focusInput = () => { inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={focusInput}>Focus Input</button> </> ); ``` --- #### 四、Redux 状态管理集成 在复杂应用中，推荐结合 Redux 进行集中化状态管理。通过 `react-redux` 库提供的 `Provider` 和 `connect`/`useSelector`，能够方便地连接 React 组件与 Redux Store。 ```javascript import { useSelector, useDispatch } from 'react-redux'; function Counter() { const count = useSelector(state => state.counter); // 订阅state变化 const dispatch = useDispatch(); // 获取dispatch方法 return ( <div> Count: {count} <button onClick={() => dispatch({ type: 'INCREMENT' })}> Increment </button> </div> ); } ``` --- #### 五、总结 上述内容涵盖了 React 中的一些重要进阶知识点，包括 Portals、Context API、Memoization、Refs 及 Redux 集成等。掌握这些技能可以帮助开发人员更高效地构建现代化前端应用。