React简单使用（一）之react环境搭建以及Hello world实现

本文简要介绍了React的特点、环境搭建步骤以及如何使用props和state。适合刚接触React的后端开发者快速入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

背景：由于我本身是后端开发出身的，但是在公司做了全栈的工作，所以需要学习前端的一些知识。最近公司前端用的是react，所以我就需要自学react。

定位

我暂时只需要能够简单的使用react开发一些页面，就足够了，不需要更深入的了解。
只需要学会简单的使用即可。

正文

1、参考文档

1、什么是react？

在菜鸟教程中如是说到：
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
简单理解：React是一个基于JavaScript的MVC 框架的view层，用于构建UI界面。

2、React的特点？

在React的官网中如是说到:

声明式设计 − React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。以声明式编写UI，可以让你的代码更加可靠，且方便调试。
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
组件化 − 创建好拥有各自状态的组件，再由组件构成更加复杂的界面。无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

组件的特点：

有利于细化 UI 逻辑，不同的组件负责不同的功能点。
有利于代码复用，多个页面可以使用同样的组件。
有利于人员分工，不同的工程师负责不同的组件。

3、React的hello world

1)、Node.js安装和配置

上面有对应的文章链接。
在创建的新项目中，然后就可以使用命令创建新的react项目。项目的目录结构如下图所示：
在这里插入图片描述

node_modules用于存放项目的依赖包，也就是构建这个React项目可能会用到的工具，
public文件夹中是 index.html存放目录，也就是React根页面的所在地
src中用于存放js文件，也就是项目开发中的主要区域
package.json用于记录项目信息，以及外部依赖包的导入信息等
json文件不能直接打开，需要用到文本编辑器，本人用的是VScode

2)、react的渲染数据

React 组件使用一个名为 render() 的方法（ReactDOM.render），接收数据作为输入，输出页面中对应展示的内容。下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法。具体案例下面可以参考。
注意：一般在项目中render()方法只会调用一次。该render方法接收两个参数，第一个参数为虚拟DOM，第二个参数为真实DOM。render方法的作用就是将虚拟DOM渲染到真实的DOM节点上。

3)、react的组件及props

组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。Props是上一层的组件传递给下一层组件的参数，如上所示。因为我们在使用组件或者组件之间配合使用时大都需要传递参数。而其正好承担这样的责任。

props的作用：主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的参数，组件内部无法控制也无法改变，除非外部组件主动传入新的porps，否则组件的props永远保持不变。
组件的创建：

可以通过JavaScript中function的形式创建，如下所示：

//这个Welcome就是一个组件，也称为函数定义组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
//调用render方法将数据渲染到root节点上
ReactDOM.render(
  element,
  document.getElementById('root')
);

通过JavaScript中class的形式创建，如下所示：

//这个ShoppingList就成为一个组件
class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<ShoppingList/>, document.getElementById('root'));

警告
组件的返回值只能有一个根元素。这也是我们要用一个<div>来包裹所有<Welcome />元素的原因。

4)、react的state以及生命周期

① 声明周期

react生命周期图解

② state的使用

首先来介绍State，State按照字面意思理解为状态，其代表着组件本身的属性，State中可以储存许多内容、参数，需要注意的是，State中的属性只能在组件内部声明和使用。

state的作用： state的主要作用是用于组件保存、修改、控制自己的状态。state可以在组件内部初始化，可以被组件自身修改，而外部组件不能访问也不能修改。可以认为state是一个局部的、只能被自身控制的数据源。state可以通过this.setState方法重新更新，setState方法会导致组件的重新渲染。
state使用案例：

class Clock extends React.Component {
  //构造函数是唯一能够初始化 this.state 的地方。
  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>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

③ 需要注意的几点

构造函数(constructor)是唯一能够初始化 this.state 的地方。
不要直接更新状态，通过setState方法更新state的值。
状态更新可能是异步的。
数据自顶向下流动。父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。这就是为什么状态通常被称为局部或封装。除了拥有并设置它的组件外，其它组件不可访问。
render中不能调用setState方法（即不能更新state）
constructor中不能调用setState方法（即不能更新state）