React是一个用于构建用户界面的JavaScript库。以下是React常用的知识点：
- 组件：React将用户界面分解成小而独立的组件，每个组件都有自己的状态和属性，并且可以通过组合这些组件来构建复杂的用户界面。
// 函数组件示例 function Welcome(props) { return <h1>Hello, {props.name}!</h1>; } // 类组件示例 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}!</h1>; } }
2.JSX：JSX是一种类似HTML的语法扩展，它允许在JavaScript代码中编写类似XML的结构。使用JSX可以方便地创建React组件。
// JSX示例 const element = <h1>Hello, world!</h1>;
3.状态（State）：React组件可以拥有自己的状态，状态是组件内部可变的数据。当状态发生改变时，React会自动重新渲染组件。
// 状态示例 class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Increment </button> </div> ); } }
44.属性（Props）：组件可以接收来自父组件的属性，并根据属性的值进行渲染。属性是组件的只读数据，不应该在组件内部修改。
// 属性示例 function Welcome(props) { return <h1>Hello, {props.name}!</h1>; } const element = <Welcome name="Alice" />;
5.生命周期：React组件具有生命周期方法，在组件的不同阶段调用这些方法可以执行相应的操作，例如组件初始化、更新或卸载时。
// 生命周期示例 class ExampleComponent extends React.Component { componentDidMount() { console.log('Component did mount'); } componentDidUpdate(prevProps, prevState) { console.log('Component did update'); } componentWillUnmount() { console.log('Component will unmount'); } render() { return <h1>Hello, world!</h1>; } }
