React构建组件的方式有哪些，有什么区别？

- 1. 函数组件
- - 1.1 特点
- 2. 类组件
- - 2.1特点
- 3. 高阶组件
- - 3.1特点
- 4. 自定义Hook
- - 4.1特点

React 组件是构成React应用的基本单元。在React中，有几种不同的方式可以创建组件，每种方式都有其特定的用途和优势。

1. 函数组件

函数组件是最简单的React组件形式，它是一个返回React元素的JavaScript函数。

function Greeting(props) {return <h1>Hello, {props.name}!</h1>;
}

在这个例子中，Greeting是一个接受props并返回一个问候信息的函数组件。

1.1 特点

无状态：函数组件不能拥有状态或生命周期钩子。
轻量级：与类组件相比，函数组件通常更简单、更易于理解。
适合展示逻辑：由于没有内部逻辑，函数组件适合用作展示组件。

2. 类组件

类组件是通过继承React.Component来创建的，它可以拥有状态（通过this.state）和生命周期钩子。

class Counter extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}increment = () => {this.setState(state => ({ count: state.count + 1 }));};render() {return (<div><h2>Count: {this.state.count}</h2><button onClick={this.increment}>Increment</button></div>);}
}

在这个例子中，Counter是一个拥有内部状态和事件处理函数的类组件。

2.1特点

有状态：类组件可以拥有和修改状态。
生命周期钩子：类组件可以定义生命周期钩子，如componentDidMount、componentDidUpdate等。
适合复杂逻辑：由于可以拥有状态和生命周期，类组件适合处理更复杂的逻辑。

3. 高阶组件

高阶组件（HOC）是一个函数，它接收一个组件并返回一个具有增强行为的新组件。

function withTitle(WrappedComponent, title) {return class extends React.Component {render() {return (<div><h2>{title}</h2><WrappedComponent {...this.props} /></div>);}};
}function MyComponent() {return <div>This is my component</div>;
}constWithTitle = withTitle(MyComponent, 'My Component Title');

在这个例子中，withTitle是一个HOC，它为MyComponent添加了一个标题。

3.1特点

复用逻辑：HOC可以用来复用组件逻辑，如认证、主题化等。
组件装饰：HOC不会修改原始组件，而是返回一个新的组件。
灵活性：HOC可以用于任何组件，无论它是函数组件还是类组件。

4. 自定义Hook

自定义Hook是一种特殊的函数，它可以让你在不修改组件结构的情况下复用状态逻辑。

function useFriendStatus(friendID) {const [isOnline, setIsOnline] = useState(null);useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);}// 假设这是从服务器获取的状态更新const channel = EventChannel.subscribe(`user_${friendID}_status`);channel.onMessage(handleStatusChange);return () => channel.remove();}, [friendID]);return isOnline;
}function FriendStatus(props) {const isOnline = useFriendStatus(props.friend.id);return <div>{props.friend.name} is {isOnline ? 'online' : 'offline'}.</div>;
}