React写法与实现 | 青训营

前几天的课学习了React相关知识，因此总结了React的写法和实现。 React是一种用于构建用户界面的JavaScript库，它采用组件化的开发方式，可以帮助开发者构建可复用、高效和可维护的UI。下面是React的一些常见写法和实现方法：

1. JSX语法：React使用JSX（JavaScript XML）语法来描述UI组件的结构和样式。JSX类似于HTML，但实际上是JavaScript的扩展，通过使用类似HTML标记的语法，可以更直观地编写React组件。

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

2. 组件定义：在React中，可以通过函数组件或类组件的方式来定义组件。函数组件是一个简单的JavaScript函数，接收props作为参数并返回JSX元素。类组件是一个继承自React.Component的类，需要实现render()方法来返回JSX。

函数组件：

import React from 'react';

const MyComponent = (props) => {
  return <h1>Hello, {props.name}!</h1>;
}

export default MyComponent;

类组件：

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default MyComponent;

3. 组件传递属性（Props）：React中的组件可以通过属性（props）进行数据传递。在父组件中通过属性传递数据给子组件，在子组件中通过this.props来获取传递的值。

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return <ChildComponent name="Alice" />;
}

4. 状态管理（State）：使用state可以在组件内部管理和更新状态。类组件通过构造函数来初始化state，并且通过this.setState()方法来更新state；函数组件可以使用useState钩子来管理状态。

类组件：

import React from '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>
    );
  }
}

export default Counter;

函数组件：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

5. 生命周期（Lifecycle）：类组件具有生命周期方法，用于在组件不同阶段执行相应的逻辑。常用的生命周期方法包括componentDidMount、componentDidUpdate和componentWillUnmount等。

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    // 组件已经挂载到DOM后执行的逻辑
  }

  componentDidUpdate(prevProps, prevState) {
    // 组件更新后执行的逻辑
  }

  componentWillUnmount() {
    // 组件即将卸载前执行的逻辑
  }

  render() {
    return <h1>Hello, React!</h1>;
  }
}

export default MyComponent;

6. 条件渲染：React允许根据条件来决定是否渲染特定组件或元素。可以使用条件语句（如if-else、三元表达式等）或逻辑运算符与JSX结合进行条件渲染。

import React from 'react';

const Greeting = (props) => {
  const isLoggedIn = props.isLoggedIn;

  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
    </div>
  );
}

export default Greeting;

以上是React的一些常见写法和实现方法。React提供了丰富的API和工具，使得开发者能够更高效地构建复杂的用户界面并管理状态。