react小白直接上手最基础文档一看就会！

快乐风男0-12

已于 2024-07-06 17:09:14 修改

阅读量296

点赞数 5

分类专栏： react 文章标签： react.js 前端前端框架

于 2024-07-06 15:39:49 首次发布

本文链接：https://blog.csdn.net/m0_56947432/article/details/140230202

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

- [React 中文文档](https://zh-hans.reactjs.org/)

## React 概述

React 是一个用于构建用户界面的 JavaScript 库。

> 如果从 MVC 的角度来看，React 仅仅是视图层（View），也就是只负责视图的渲染，而并非提供了完整的 M 和 C 的功能。
> React 起源于 Facebook ,并于 2013 年 5 月开源

## React 三个特点

- 1 声明式
  - JSX 语法是声明式的，只需要描述页面长什么样子
  - React.createElement() 是命令式
- 2 组件化
  - 创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI
  - 组件逻辑使用 JavaScript 编写而非模版
- 3 一次学习，随处编写
  - 不仅可以开发 web 应用（react-dom），还可以开发原生安卓或ios应用（react-native）

## React基本使用

1. 在html定义一个根标签

   ```javascript
   <div id="root"></div>
   ```

2. 引入两个JS文件（注意引入顺序）

   ```html
   
   <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

   
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
   ```

3. 创建react元素(类似html元素)

   ```javascript
   // 返回值：React元素
   // 第一个参数：要创建的React元素名称字符串
   // 第二个参数：该React元素的属性 null或者对象 {id: 'box'}
   // 第三个及其以后的参数：该React元素的子节点文本或者其他react元素
   const title = React.createElement('h1', null, 'Hello React',...)
   ```

4. 渲染 react 元素

   ```javascript
   ReactDOM.render(title, document.getElementById('root'))
   ```

## 特殊属性

- 添加样式要使用 className

```js
const title = React.createElement('h1', {
  className: 'active'
}, 'Hello React')
```

- label的for属性,要改成htmlFor

```javascript
const title = React.createElement('label', {
  htmlFor: 'abc'
}, 'Hello React')
```

## JSX

>React.createElement()写起来太复杂了,所以推荐使用更加简洁的**jsx**
>
>**JSX**是JavaScript XML,是React提供的Syntax Sugar(语法糖), 能让我们可以在JS中写html标记语言

```jsx
const h1 = <h1 className="active">哈哈哈</h1>
```

**注意: 浏览器并不认识jsx 所以需要引入babel将jsx编译成React.createElement的形式**

> 编译 JSX 语法的包为：@babel/preset-react

```html

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


<script type="text/babel">
    const h1 = <h1 className="active"></h1>
    ReactDOM.render(h1, document.getElementById('root'))
</script>

```

## JSX中使用 JS 表达式

- JSX中使用JS表达式的语法：`{}`
- 注意：{} 里面可以写表达式,但是不能写语句(比如 if , for 等),
- 注意:   {} 如果要写对象,应该是一个react元素或者是行内样式对象

```js
const dv = <div className="abc">JSX中使用表达式： { 1 + 2 }</div>

const dv = <div title={'我是标题'}>JSX中使用表达式： { 1 + 2 }</div>

const dv = <div>JSX中使用表达式： { <span>JSX自身也是合法的JS表达式</span> }</div>
```

## 条件渲染

- 1 if / else

```js
let box
if (isloading) {
     box = <div>loading...</div>
} else {
     box = <h1>数据加载完成~</h1>
}
ReactDOM.render(box, document.getElementById('root'))
```

- 2 三元

```js
let box = isLoading ? <div>loading...</div> : <h1>数据加载完成~</h1>
ReactDOM.render(box, document.getElementById('root'))
```

- 3 &&

```js
let box = isLoading && <div>loading...</div>
ReactDOM.render(box, document.getElementById('root'))
```

## 列表渲染

- react中可以将数组中的元素直接渲染到页面上
- 因为jsx的原因,可以直接往数组中存储react对象
- 所以推荐使用数组的 map 方法
- 注意：应该给列表项添加 key 属性

```js
let songs = [{id: 1,name: '东风破'},{id: 2,name: '菊花残'}]

let list = <ul>{songs.map(item => <li key={item.id}>歌名：{item.name}</li>)}</ul>

ReactDOM.render(list, document.getElementById('root'))
```

## 样式处理

- 1 行内样式
  - 如果样式是数值，可以省略单位

```js
<div style={ { color: 'red', fontSize: 30 } }>web</div>
```

- 2 类名（推荐！！！）

```js
<div className="abc">web</div>
```

**注意:**

1. React元素的属性名使用小驼峰命名法
2. 没有子节点的React元素可以写成自闭和标签形式

## 事件处理

### 绑定事件

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

- React 事件的命名采用小驼峰式（camelCase），而不是纯小写.比如：onMouseEnter、onFocus
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串

```javascript
const div = <div onClick={事件处理函数}></div>
```

### 事件对象

React 中的事件对象叫做：合成事件  (兼容所有浏览器，无需担心跨浏览器兼容性问题)

**注意: **

1. react中事件处理函数不能使用return false 阻止默认行为.需要使用事件对象的preventDefault()实现
2. 如果在控制台打印事件对象,属性值都是null.一定要查看的话,调用事件对象.persist()方法

```javascript
function handleClick(e) {
     e.preventDefault() //有效
     console.log('事件对象', e)
     // return false  无效
  }
const div = (
   <a href='https://www.baidu.com' onClick={handleClick}>
          测试
   </a>
)
```

## 案例

- 需求：实现评论列表功能

-  如果有评论数据，就展示列表结构 li（列表渲染）要包含a标签

  - name 表示评论人，渲染 h3
  - content 表示评论内容，渲染 p

-  如果没有评论数据，就展示一个 h1 标签，内容为：暂无评论！

-  根据自己的喜好添加样式

- 给a标签注册点击事件, 打印内容



```js
const list = [
  { id: 1, name: 'jack', content: 'rose, you jump i jump' },
  { id: 2, name: 'rose', content: 'jack, you see you, one day day' },
  { id: 3, name: 'tom', content: 'jack,。。。。。' }
]
```

## React的组件

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

**一个React应用就是由一个个的组件组成的**

## 创建组件的两种方式

### 函数组件

不能定义状态

```javascript

function Header(){
    return <div>我是标题组件</div>
}
// 函数名就是组件名
ReactDom.render(<Header></Header>, document.getElementById('root'))

// 注意:
1. 组件名首字母必须大写. 因为react以此来区分组件和react元素
2. 必须有返回值.返回的内容就是组件呈现的结构, 如果返回值为 null，表示不渲染任何内容
3. 组件内部如果有多个标签,必须使用一个根标签包裹.只能有一个根标签

```

### 类组件

可以定义状态(状态: 组件内部私有的数据)

```javascript
class Header extends React.Component{
    render(){
        return <div>我是标题组件</div>
    }
}
// 如果组件没有子节点,也可以写成自闭和标签
ReactDom.render(<Header />, document.getElementById('root'))

//注意:
1. 组件名首字母必须大写.
2. 类组件中必须要声明一个render函数
3. render函数中必须有返回值.
4. 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性
5. 组件内部如果有多个标签,必须使用一个根标签包裹.只能有一个根标签
```

## 组件的状态 state

函数组件又叫做无状态组件，类组件又叫做有状态组件

状态（state）即数据

函数组件没有state,一般只负责渲染静态结构

类组件有自己的状态，负责更新 UI，让页面“动” 起来

### state的基本使用

- 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用

- state 的值是对象，表示一个组件中可以有多个数据
- 获取状态：this.state

```javascript
class Hello extends React.Component {
    constructor() {
        super()
        this.state = { count: 0 }  // 初始化state
    }
     // 简化语法
    // state= { count: 0 }

    render() {
        return (
              <div>{this.state.count}</div>
        )
    }
}
```

### 操作state

语法：this.setState({ 要修改的数据 })

注意：不要直接修改 state 中的值，应该使用组件实例的setState方法,修改state的值

setState() 作用：

1. 修改 state
2. 更新UI

```javascript
class Hello extends React.Component {
    constructor() {
        super()
        this.state = { count: 0, num: 100 }// 初始化state
    }

    render() {
        return (
            <div
            onClick={() => {
            this.setState({
                count: this.state.count + 1
            })
        }}
    >
        {this.state.count}
</div>
)
}
}
```

### setState的注意点

- 连续调用合并问题

  ```javascript
  handle = () => {
      this.setState({
          count: this.state.count + 1
      })
      this.setState({
          count: this.state.count + 2
      })
      this.setState({
          count: this.state.count + 3
      })
  }
  // 连续调用.react会将多次合并成一次. 最终执行的是最后一次
  ```



- setState第一个参数传入函数

  ```javascript

  state = {count:0}
  // 第一个参数除了可以像之前一样传入一个对象之外,还可以传入一个函数.如下
  // 这个函数,接收一个最新的state和最新的props
  // 函数要求返回一个对象
  this.setState((state, props) => {
      return {
          count: state.count + 1
      }
  })
  this.setState((state, props) => {
      return {
          count: state.count + 2
      }
  })
  this.setState((state, props) => {
      return {
          count: state.count + 3
      }
  })
  // 最终状态中count的结果是 6
  ```

- setState将对组件 state 的更改排入队列,所以调用之后,立刻获取this.state拿到的值很有可能是错误的

  ```javascript
  state = {count:0}

  this.setState((state, props) => {
      return {
          count: state.count + 1
      }
  })
  this.setState((state, props) => {
      return {
          count: state.count + 2
      }
  })
  this.setState((state, props) => {
      return {
          count: state.count + 3
      }
  })
  // 这里获取到的state中count的值就是错误的
  console.log(this.state.count) // 0
  ```

- setState的第二个可选参数

  ```javascript
  // 如果想要在setState之后立刻得到最新的state. 可以使用第二个可以选参数
  this.setState(
    (state, props) => {},
     //它将在 setState 完成合并并重新渲染组件后执行
    () => {console.log(this.state)}
  )
  ```



## 事件绑定this的指向问题

为了提高代码的阅读性,最好把事件处理函数定义在结构的外面.

但是这样就带来了this指向的问题:

**handle中的this 指向 undefined (原因: bable编译jsx. 采用的是严格模式, 普通函数this就指向undefined)**

```javascript
class Hello extends React.Component {
    constructor() {
        super()
        this.state = { count: 0, num: 100 }// 初始化state
    }

    handle() {
        //这里this指向undefined
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return <div onClick={this.handle}>{this.state.count}</div>
    }
}
```

### 1.解决this指向 - 箭头函数

```javascript
class Hello extends React.Component {
    constructor() {
        super()
        this.state = { count: 0, num: 100 }// 初始化state
    }

    handle() {
        //这里this指向当前组件实例
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        // 解决方式1: 箭头函数
        return <div onClick={（）=> this.handle()}>{this.state.count}</div>
    }
}
```

### 2.解决this指向 - bind

```javascript
class Hello extends React.Component {
     constructor() {
         super()
         this.state = { count: 0, num: 100 } // 初始化state
         //解决方式2: bind
         this.handle = this.handle.bind(this)
     }

     handle() {
         //这里this指向当前组件实例
         this.setState({
             count: this.state.count + 1
         })
     }

     render() {
         return <div onClick={this.handle}>{this.state.count}/div>
     }
}
```

### 3.解决this指向 - 类的实例方法

```javascript
class Hello extends React.Component {
     constructor() {
         super()
         this.state = { count: 0, num: 100 } // 初始化state
     }
    // 解决方式3: 类的实例 (注意:这种语法形式目前处于试验性阶段.但是由于使用了babel,可以放心使用)
     handle = () => {
         //这里this指向当前组件实例
         this.setState({
             count: this.state.count + 1
         })
     }

     render() {
         return <div onClick={this.handle}>{this.state.count}/div>
     }
}
```

## 组件的props

组件是封闭的，要接收外部数据应该通过 props 来实现

props的作用：接收传递给组件的数据

传递数据：给组件标签添加属性

接收数据：函数组件通过参数props接收数据，类组件通过 this.props 接收数据

```javascript
<Hello name="jack" age={19} />

function Hello(props) {
  console.log(props)
  return (
    <div>接收到数据：{props.name}</div>
  )
}

class Hello extends React.Component {
  render() {
    return (
      <div>接收到的数据：{this.props.age}</div>
    )
  }
}
```

### props的特点:

1. 可以给组件传递任意类型的数据
2. props 是只读的对象，只能读取属性的值，不要修改props
3. 注意：使用类组件时，如果写了构造函数，应该将 props 传递给 super()，否则，无法在构造函数中获取到 props

```javascript
class Hello extends React.Component {
  constructor(props) {
    // 推荐将props传递给父类构造函数
    super(props)
      this.props
  }
  render() {
    return <div>接收到的数据：{this.props.age}</div>
  }
}
```

### props校验

对于组件来说，props 是外来的，无法保证组件使用者传入什么格式的数据

如果传入的数据格式不对，可能会导致组件内部报错

关键问题：组件的使用者不知道明确的错误原因

允许在创建组件的时候，就指定 props 的类型、格式等

作用：捕获使用组件时因为props导致的错误，给出明确的错误提示，增加组件的健壮性

**实现方式:**

1. 导入 prop-types 包
2. 使用propTypes来给组件的props添加校验规则

```javascript
//常见类型：array、bool、func、number、object、string还有element(react元素)
// 必填项：isRequired
// 特定结构的对象：shape({  })
import PropTypes from 'prop-types'
class Hello extends React.Component(){
    static propTypes = {
         msg: PropTypes.string.isRequired
         list: PropTypes.array
         obj: PropTypes.shape({
          color: PropTypes.string,
          fontSize: PropTypes.number
        })
    }
    render(){
        return <div msg="props校验" ></div>
    }
}
```

### props默认值

作用：给 props 设置默认值，在未传入 props 时生效

**实现方式:**

```javascript
function App(props) {
  return (
    <div>
      此处展示props的默认值：{props.pageSize}
    </div>
  )
}
// 设置默认值
App.defaultProps = {
  pageSize: 10
}
// 不传入pageSize属性
<App />
```

## 表单处理

### 受控组件

HTML 中的表单元素是可输入的，也就是有自己的可变状态.而React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改 .React将 state 与表单元素值value绑定到一起，由 state 的值来控制表单元素的值

**受控组件：其值受到 React 控制的表单元素**

#### 实现方式:

1. 在 state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
2. 给表单元素绑定 change 事件，将表单元素的值设置为 state 的值（控制表单元素值的变化）

```javascript
class Hello extends React.Component {
    constructor() {
        super()
        this.state = { text: '' } // 初始化state
    }

    handle = e => {
        //这里this指向当前组件实例
        this.setState({
            text: e.target.value
        })
    }

    render() {
        return <input onChange={this.handle} value={this.state.text}></input>
    }
}

//补充: 文本框、文本域、下拉框操作value属性复选框操作checked属性
```

**多表单元素处理**

利用柯里化函数实现

> 柯里化（Currying），又称部分求值（Partial Evaluation），是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果是新函数的技术。

```javascript
class Hello extends React.Component {
  state = {
    msg: '文本框',
    area: '文本域',
    selected: 'sj',
    checked: false
  }

  // 这是文本框, 文本域, 以及下拉选择共同使用的事件处理函数
  handle = name => {
      return e => {
          // 判断当前事件目标是不是复选框,如果是,使用checked, 如果不是,使用value
            let value = name === 'checked' ? e.target.checked : e.target.value
            this.setState({
              [name]: value
            })
      }
  }

  render() {
    return (
      <div>
        {/* 文本框 */}
        <input
          type='text'
          value={this.state.msg}
          onChange={this.handle('msg')}
        />
        <br />
        {/* 文本域 */}
        <textarea
          id=''
          cols='30'
          rows='10'
          value={this.state.area}
          onChange={this.handle('area')}
        ></textarea>
        <br />
        {/* 下拉框 */}
        <select
          name='selected'
          value={this.state.selected}
          onChange={this.handle('selected')}
        >
          <option value='cf'>吃饭</option>
          <option value='sj'>睡觉</option>
          <option value='ddd'>打豆豆</option>
        </select>
        <br />
        {/* 复选框 */}
        <input
          type='checkbox'
          checked={this.state.checked}
          onChange={this.handle('checked')}
        />
      </div>
    )
  }
}
```

### 非受控组件

借助于 ref，使用原生 DOM 方式来获取表单元素值

ref 的作用：获取 DOM 或组件

#### 实现方式:

1. 调用 React.createRef() 方法创建一个 ref 对象

   ```javascript
   constructor() {
     super()
     this.txtRef = React.createRef()
   }
   ```

2. 将创建好的 ref 对象添加到文本框中

   ```javascript
   <input type="text" ref={this.txtRef} />
   ```



3. 通过 ref 对象获取到文本框的值

   ```javascript
   Console.log(this.txtRef.current.value)