React是一个用于构建用户界面的JavaScript库。它是一个组件化的库，允许您将UI拆分为单独的可重用组件，并使您能够以声明性方式描述UI。
基础知识
组件
React中的组件是UI的构建块。组件可以是函数组件或类组件。函数组件是一种声明式的组件，接受一些输入（称为“props”），并返回一个描述UI的React元素。类组件是具有状态和生命周期方法的组件。它们也接受props作为输入，并通过调用render()方法返回一个React元素。
JSX
JSX是一种JavaScript语法扩展，允许您在JavaScript代码中编写类似HTML的代码。在React中，您使用JSX来描述UI。JSX元素看起来像HTML标记，但它们是JavaScript对象。当您在JSX中使用{}时，可以在其中添加JavaScript表达式。
例如，以下代码将一个简单的div元素呈现到屏幕上：
const element = <div>Hello, world!</div>;
ReactDOM.render(element, document.getElementById('root'));
Props
props是组件的输入。当您呈现组件时，可以将props传递给它。组件可以通过this.props（对于类组件）或props（对于函数组件）访问它们的props。props是只读的，因此组件不能更改它们。通常，您在组件中使用props来自定义组件的外观和行为。
以下是一个接受props并将它们呈现为文本的函数组件的示例：
function Greeting(props) { return <div>Hello, {props.name}!</div>; }
State
state是组件的内部状态。它是一个可变的对象，可以随着时间的推移而更改。当您更改组件的状态时，React会重新呈现组件并更新UI以反映新状态。通常，您在类组件中使用state。
以下是一个具有状态的类组件的示例：
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<div>Count: {this.state.count}</div>
<button onClick={() => this.increment()}>Increment</button>
</div>
);
}
}
生命周期方法
生命周期方法是在组件生命周期中调用的方法。它们允许您在组件挂载、更新或卸载时执行操作。例如，componentDidMount()方法在组件挂载到DOM后立即调用。
以下是一个具有生命周期方法的类组件的示例：
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({ date: new Date() });
}
render() {
return <div>{this.state.date.toLocaleTimeString()}</div>;
}
}
事件处理
在React中处理事件与在常规JavaScript中处理事件类似。您可以将事件处理程序作为属性传递给元素，并在事件发生时调用该处理程序。在处理程序中，您可以使用this.setState()更改组件的状态。
以下是一个处理点击事件的示例：
class Button extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<button onClick={() => this.handleClick()}>
Click me ({this.state.count})
</button>
);
}
}
实践
创建React应用程序
要创建React应用程序，您可以使用create-react-app工具。这个工具将为您设置React开发环境，并提供一些工具来帮助您开发应用程序。
要创建React应用程序，请按照以下步骤操作：
安装
create-react-app（如果尚未安装）：npm install -g create-react-app ```创建新应用程序：create-react-app my-app cd my-app ```
运行应用程序：
npm start
呈现组件
要呈现组件，请在JSX中使用组件标记。例如，以下代码将呈现一个HelloWorld组件：
function HelloWorld() {
return <div>Hello, world!</div>;
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'));
传递props
要将props传递给组件，请将它们作为属性传递。例如，以下代码将向Hello组件传递一个name属性：
function Hello(props) {
return <div>Hello, {props.name}!</div>;
}
ReactDOM.render(<Hello name="Alice" />, document.getElementById('root'));
处理事件
要处理事件，请将事件处理程序作为属性传递给元素。在事件处理程序中，您可以使用this.setState()更改组件的状态。例如，以下代码将向Button组件添加一个点击事件处理程序：
class Button extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<button onClick={() => this.handleClick()}>
Click me ({this.state.count})
</button>
);
}
}
ReactDOM.render(<Button />, document.getElementById('root'));
使用条件渲染
要根据某些条件呈现不同的内容，请使用条件渲染。您可以使用JavaScript的条件运算符（?）或if语句来实现条件渲染。例如，以下代码将根据isLoggedIn属性呈现不同的内容：
function Greeting(props) {
if (props.isLoggedIn) {
return <div>Welcome back!</div>;
} else {
return <div>Please sign up.</div>;
}
}
ReactDOM.render(<Greeting isLoggedIn={false} />, document.getElementById('root'));
使用列表和键
要呈现列表，请使用map()方法将列表中的每个元素映射到React元素。您还需要为列表中的每个元素指定一个唯一的键。键用于帮助React识别列表中的每个元素，并优化更新。例如，以下代码将呈现一个包含三个项目的列表：
const items = ['apple', 'banana', 'orange'];
function List() {
return (
<ul>
{items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
}
ReactDOM.render(<List />, document.getElementById('root'));
使用样式
要为元素添加样式，请将样式作为JavaScript对象传递给元素的style属性。属性名称应该是驼峰式命名法，例如backgroundColor。例如，以下代码将为Button组件添加一个红色背景色：
class Button extends React.Component {
render() {
const style = {
backgroundColor: 'red',
color: 'white',
};
return <button style={style}>Click me</button>;
}
}
ReactDOM.render(<Button />, document.getElementById('root'));
