React（1）之——React入门

最新推荐文章于 2025-08-21 18:21:46 发布

转载最新推荐文章于 2025-08-21 18:21:46 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ce667f96fb9a07ec42b346a

文章标签：

#ui #javascript #ViewUI

本文围绕React展开，介绍了创建React项目的方法，阐述了React和ReactDOM的作用，讲解了JSX的优点与表达式写法。还介绍了创建组件的两种形式、state和setState的使用、props属性传递、条件与列表渲染、事件处理、组件通信等内容，强调了在React中维持不变性的好处。

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

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

创建react项目

npm install -g create-react-app下载官方的脚手架工具create-react-app。
create-react-app react01创建一个新的名为react01的项目。
创建好的react项目目录结构如下：

同Vue很相似，项目有一个入口文件，入口文件中的根组件会渲染到DOM树的根结点root下。

React和ReactDOM

React和ReactDOM是开发React项目必不可少的两个包。React负责逻辑控制，它用JSX来描述虚拟DOM以及用它的Component类来创建一个组件；而ReactDOM主要负责渲染，将构建好的虚拟DOM渲染成真实DOM到页面上。
来自官方的示例：这里面还涉及到另一个问题，JSX是什么？

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example'));
复制代码

相当于

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    )
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
)
复制代码

JSX

JSX形如js和html的混合体，它在react代替常规的js语法。它的优点：1）执行更快，提高执行效率。2）使用我们更熟悉的html来描述UI，JSX在react转换为js的写法形如：React.createElement("div",null,"Hello ",this.props.name);，写起来很繁琐。3）它是类型安全的，在编译过程中就能发现错误。
JSX就是html加上表达式，下面介绍一下一些表达式的写法：

import src from './static/img'
sayHi(){
    return 'hello, react'
}
render(){
    const name = 'zhunny'
    const jsx = '<p>jsx</p>'
    return(
        <div>
        {/*注释语法*/}
        {/*表达式*/}
        <h1>{name}</h1>
        <h1>{this.seyHi()}</h1>
        {/*属性的写法*/}
        <img src={src} style={{width:"200px"}}>
        {/*jsx也可以直接当成是表达式*/}
        {jsx}
        {/*只要是js表达式都可以放在{}里面*/}
        <div>
    )
}
复制代码

创建组件的两种形式

一种是函数类型组件，一种是基于类的组件。

//rfc 比较简洁，直接相当于render函数，但hooks的出现使得它们之间没有太大区别
import React from 'react'

export default function CompType() {
  return (
    <div>
      
    </div>
  )
}
//rcc 可以在类中使用各种生命周期钩子，在constructor构造函数中初始化state和props
import React, { Component } from 'react'

export default class CompType extends Component {
  render() {
    return (
      <div>
        
      </div>
    )
  }
}
复制代码

state和setState

state

使用组件时，可能会出现一些特别的状态，它们可能会改变因此影响视图的变化，因此我们需要去维护这些状态。凡是数据与视图有交互的时候，就需要将这些数据维护到状态state中去。state一般在构造函数constructor中初始化。

constructor(props) {
    super(props)
    this.state = {
      count:1
    }
 }
复制代码

setState

而setState是官方提供给我们用来修改state值的方法，千万不能直接修改state，会报错。使用setState修改state有两种方法，直接修改state对象setState(obj,cb)，或者传入一个修改函数setState(fn,cb)。因为state和setState是批量执行的，这样可以提升更新的性能，但是同时它会认为连续相同的操作形如setState(obj,cb)是一样的，只会执行最后一次。这个时候就需要使用第二种修改state的方法。

componentDidMount () {
  this.setState({
    count: this.state.count + 1
  })
}
复制代码

componentDidMount () {
  this.setState(preState => ({
    count:preState.count + 1
  }))
  this.setState(preState => ({
    count:preState.count + 1
  }))
}

复制代码

props属性传递

这是一种父组件向子组件传递属性的一种方式，父->子通信的方法。两种不同类型的组件在调用props时有差别。

//在父组件中  
import { Welcome1, Welcome2 } from './components/CompType'
export default class App extends Component {
    render () {
        return (
            <Welcome1 name="zhunnyWang" />
            <Welcome2 name="zhunnyWang" />
        )
    }
}
复制代码

//在子组件中  
//props传值，两种方式有区别，props是只读的
//单向绑定，严格的单向数据流
export function Welcome1 (props) {
  return (
    <div>
      Welcome1,{props.name}
    </div>
  )
}

export class Welcome2 extends React.Component {
  constructor(props){
    super(props)
  }
  render () {
    return (
      <div>Welcome2,{this.props.name}</div>
    )
  }
}
复制代码

条件渲染和列表渲染

这是在react使用最频繁的两种表达式写法。条件渲染有两种实现方式，一种是使用三元表达式，一种是使用短路逻辑。父组件向子组件传递了一个props为title='goodlist'。列表渲染就是循环的将一个数组中的元素显示在视图上。

export class GoodsList extends React.Component {
  constructor(props){
    super(props)
    this.state = {
        goods:[
         {id:1,name:'《你不知道的Javascript》'}
         {id:2,name:'《CSS世界》'}
        ]
    }
  }
  render () {
    const title = this.props.title ? <h1>{this.props.title}</h1> : null
    return (
      <div>
       {/*条件渲染的第一种方式，三元表达式*/}
       {title}
       {/*条件渲染的第二种方式，短路逻辑*/}
       {this.props.title && <h1>this.props.title</h1>}
       {/*列表渲染*/}
       <ul>
        {this.state.goods.map(good => (<li key={good.id}>{good.name}</li>))}
       </ul>
      </div>
    )
  }
}
复制代码

事件处理

react的事件处理与原生js形似，形如onClick={this.fn}。事件处理函数的声明有两种方式，一种是通过箭头函数，一种是普通函数但是需要在构造函数中绑定this。

export class GoodsList extends React.Component {
  constructor(props){
    super(props)
    this.state = {
        goods:[
         {id:1,name:'《你不知道的Javascript》'}
         {id:2,name:'《CSS世界》'}
        ],
        text: ''
    }
    //不用箭头函数就得绑定this
    this.addGood = this.addGood.bind(this)
  }
  textChange = (e) => {
    this.setState({
      text: e.target.value
    })
  }
  addGood () {
    /**
     * react官方希望这是一个纯函数
     * 更新的数据不是之前的数据，而是一个全新的数据
     */
    this.setState(prevState => {
      return {
        goods: [
          ...prevState.goods,
          {
            id: prevState.goods.length + 1,
            name: prevState.text
          }
        ]
      }
    })
  }
  render () {
    return (
      <div>
       {/*react严格遵循单向数据流，没有数据的双向绑定，因此需要自己来实现*/}
       <input type="text" text={this.state.text} onChange={this.textChange} />
       <button onClick={this.addGood}>添加商品</button>
       {/*需要在声明的事件处理函数中传入参数时，也需要借用箭头函数来传参*/}
       <button onClick={() => {this.addToCart(good)}}>添加商品</button>
      </div>
    )
  }
}

复制代码

组件的通信

父传子可以使用props来传递，上述章节已经给出示例。子传父也需要借助props传递一个回调函数，通过回调函数来触发父组件中的方法，用父组件中的函数来修改子组件中的值。这与vue有很大的差异，react希望子组件是一个非常单纯的组件，它只有展示功能，所有的操作在父组件中完成。

//父组件 
export class Counter extends React.Component {
  constructor(props){
    super(props)
    this.state = {
        count:1
    }
  }
  add = (value) => {
    this.setState(prevState => {
        count: preState.count + value 
    })
  }
  render () {
    return (
      <div>
        <Add count={this.state.count} add={this.add}></Add>
      </div>
    )
  }
}
//子组件
export function Add ({ count, add }) {
    return(
        <div>
            {count}
            <button onClick={add(10)}></button>
        </div>
    )
}
复制代码

状态提升

摘自官方文档的一段话，当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。
这就是上述所说的子组件是非常单纯的，父组件操作，只将结果传递给子组件，子组件将结果最终展示到视图上。

不变性

一般来说，有两种修改数据的方式，第一种是直接修改变量的值，第二种是将新的数据直接替换旧的数据。在React中，官方推荐我们在修改状态值时使用全新的数据替换旧数据，维持不变性。
第一种：直接修改变量的值：

const name = { firstName:'wang', secondName:'zhunny' }
name.firstName = 'zhou'
复制代码

第二种：全新的数据替换旧的数据：

const name = { firstName:'wang', secondName:'zhunny' }
const newName = {...name, firstName:'zhou'}  
复制代码

在React中维持不变性有以下几点好处：

简化复杂的功能。
跟踪数据的改变，跟踪不可变数据的变化相对来说就容易多了。如果发现对象变成了一个新对象，那么我们就可以说对象发生改变了。
确定在 React 中何时重新渲染，不可变性最主要的优势在于它可以帮助我们在 React 中创建 pure components。我们可以很轻松的确定不可变数据是否发生了改变，从而确定何时对组件进行重新渲染。在生命周期钩子函数 shouldComponentUpdate() 中会构建 pure components 的内容。
对于数组和对象这样的引用类型，改变它的指向才能触发render函数，对组件重新渲染。