react组件如何开发
React 组件开发指南
函数组件与类组件
函数组件是React推荐的现代写法，使用Hooks管理状态和生命周期。类组件通过extends React.Component实现，适用于需要复杂生命周期控制的场景。
// 函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 类组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}状态管理
函数组件使用useState Hook管理局部状态，类组件通过this.state和this.setState()实现状态更新。
// 函数组件状态
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
// 类组件状态
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return <button onClick={() => this.setState({ count: this.state.count + 1 })}>
{this.state.count}
</button>;
}
}生命周期处理
函数组件使用useEffect Hook替代生命周期方法，类组件直接实现componentDidMount等方法。
// 函数组件生命周期
function DataFetcher() {
useEffect(() => {
fetchData(); // componentDidMount
return () => cleanup(); // componentWillUnmount
}, [deps]); // componentDidUpdate
}
// 类组件生命周期
class DataFetcher extends React.Component {
componentDidMount() { fetchData(); }
componentWillUnmount() { cleanup(); }
componentDidUpdate(prevProps) { /*...*/ }
}事件处理
React事件使用驼峰命名，函数组件通过const定义处理函数，类组件通常需要绑定this。
// 函数组件事件
function Button() {
const handleClick = () => console.log('Clicked');
return <button onClick={handleClick}>Click</button>;
}
// 类组件事件
class Button extends React.Component {
handleClick = () => console.log('Clicked');
render() {
return <button onClick={this.handleClick}>Click</button>;
}
}组件通信
父组件通过props向子组件传递数据，子组件通过回调函数与父组件通信。复杂场景可使用Context或状态管理库。
// 父子组件通信
function Parent() {
const [value, setValue] = useState('');
return <Child value={value} onChange={setValue} />;
}
function Child({ value, onChange }) {
return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}性能优化
使用React.memo缓存函数组件，类组件继承PureComponent实现浅比较。避免在render中创建新对象/函数。
// 函数组件优化
const MemoComponent = React.memo(function MyComponent(props) {
/* 仅在props改变时重新渲染 */
});
// 类组件优化
class PureComponent extends React.PureComponent {
render() { /* 自动浅比较props和state */ }
}组件设计模式
容器组件负责数据逻辑，展示组件专注UI渲染。高阶组件(HOC)和自定义Hook可用于复用逻辑。
// 高阶组件示例
function withLogger(WrappedComponent) {
return function(props) {
console.log('Rendered:', props);
return <WrappedComponent {...props} />;
};
}
// 自定义Hook示例
function useWindowSize() {
const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
useEffect(() => {
const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
