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

程序员鱼皮

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

970

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

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

昨天我们回顾了 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')
);

在上述代码中，我们首先定义了一个简单的功能性组件 Message，它返回一个带有文本的 h1 元素。然后，我们定义了一个类组件 Clock，它有一个计时器，每秒更新时间。我们使用 ReactDOM.render 方法将这些组件渲染到HTML文档中的一个元素上。

React 提供了一种高效且灵活的方法来构建用户界面，它的组件化和声明式编程范式极大地提高了开发效率。

本文参与?腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-05-09，如有侵权请联系?cloudcommunity@tencent.com 删除

基础