今日代码大赏 | React 基础语法再回顾

程序员鱼皮

发布于 2024-05-10 11:46:29

5420

文章被收录于专栏：鱼皮客栈鱼皮客栈

昨天我们回顾了 Vue 基础语法，今天我们来继续回顾下 React 的基础语法。

React 是一个用于构建用户界面的开源 JavaScript 库，由 Facebook 维护。它以组件化和声明式编程范式而闻名，广泛用于创建交互式、可复用的UI组件。

React 允许开发者使用名为 JSX 的语法扩展来创建虚拟 DOM，它通过比较前后两次渲染的虚拟 DOM 来决定如何高效地更新 UI。React 的应用组件化特性使其成为构建大型应用的有力工具。

React 的基础语法

1）JSX：React 使用 JSX 语法，它类似于 HTML，但编译成 JavaScript。 2）组件：React 应用由多个独立、可复用的组件构成，每个组件管理自己的状态。 3）状态(State)和属性(Props)：组件有状态和属性，状态是组件内部的、可以变化的数据，属性是从父组件传递给子组件的数据。 4）生命周期：React 组件有生命周期，包括挂载、更新和卸载等阶段。

下面是 React 的基础语法示例代码：

import React from 'react';

// 功能性组件
const Message = () => {
  return <h1>Hello, React!</h1>;
};

// 类组件
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 (
      <p>
        React Clock: {this.state.date.toLocaleTimeString()}
      </p>
    );
  }
}

// 组件渲染
ReactDOM.render(
  <div>
    <Message />
    <Clock />
  </div>,
  document.getElementById('root')
);