React基础知识点与实践

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应用程序，请按照以下步骤操作：

1. 安装create-react-app（如果尚未安装）：npm install -g create-react-app ```

2. 创建新应用程序：create-react-app my-app cd my-app ```

3. 运行应用程序：

   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'));