探秘react，一文弄懂react的基本使用和高级特性

最新推荐文章于 2024-06-04 20:32:24 发布

2301_79962153

最新推荐文章于 2024-06-04 20:32:24 发布

阅读量802

点赞数 14

分类专栏：程序员文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/2301_79962153/article/details/138415159

版权

程序员专栏收录该内容

208 篇文章 0 订阅

订阅专栏


**此时浏览器的显示效果如下：**


![渲染列表](https://img-blog.csdnimg.cn/5836efc973064656bf22dbe3ed6e7e6c.png#pic_center)


在 `react` 中，使用的是 `list.map` 来渲染列表。其中， 需要注意的是， `list.map()` 是一个函数，那现在我们假设这个函数里面要遵循一套规则 `list.map( item => item.id )` 。


这个时候，我们视 `.map` 为一个数组的**重组**，那么重组的规则就是 `item => item.id` 。同时， `list.map` 返回的是一个**数组**。


### 4、React的事件


#### （1）bind this


先来看一段代码：

import React from ‘react’

class EventDemo extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ‘zhangsan’
}

    // 修改方法的 this 指向
    // 使用这个写法，组件初始化时，只执行一次bind
    this.clickHandler1 = this.clickHandler1.bind(this)
}
render() {
    // this - 使用 bind
    return <p onClick={this.clickHandler1}>
        {this.state.name}
    </p>
}
clickHandler1() {
    // console.log('this....', this) // this 默认是 undefined
    this.setState({
        name: 'lisi'
    })
}

}

export default EventDemo


**最终浏览器显示的效果为：**


![bind this(1](https://img-blog.csdnimg.cn/a6effbcdf9c74d9b92189e64f25492d3.png#)


在这段代码中，我们通过 `this.clickHandler1 = this.clickHandler1.bind(this)` 来对 `clickHandler1` 进行绑定。




---


还有另外一种关于 `this` 的绑定方法。**先来看一段代码：**

import React from ‘react’

class EventDemo extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ‘zhangsan’
}
}
render() {
// this - 使用静态方法
return

clickHandler2 {this.state.name}

}
// 静态方法，this 指向当前实例
clickHandler2 = () => {
this.setState({
name: ‘lisi’
})
}
}

export default EventDemo


**此时浏览器的显示效果为：**


![bind this](https://img-blog.csdnimg.cn/2342f2993983478084092daf5c9182ba.png#)


对于上面的这种方式来说， `clickHandler2` 是一个静态方法，此时它的 `this` 会指向当前的实例。


#### （2）关于 event 参数


**先来看一段代码：**

import React from ‘react’

class EventDemo extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ‘zhangsan’
}
}
render() {
// event
return
click me

}
// 获取 event （重点）
clickHandler3 = (event) => {
event.preventDefault() // 阻止默认行为
event.stopPropagation() // 阻止冒泡
console.log(‘target’, event.target) // 指向当前元素，即当前元素触发
console.log(‘current target’, event.currentTarget) // 指向当前元素，假象！！！

    // 注意，event 其实是 React 封装的。可以把 \_\_proto\_\_.constructor 看成是 SyntheticEvent 组合事件
    console.log('event', event) // 不是原生的 Event ，原生的是 MouseEvent
    console.log('event.\_\_proto\_\_.constructor', event.\_\_proto\_\_.constructor)

    // 原生 event 如下。其 \_\_proto\_\_.constructor 是 MouseEvent
    console.log('nativeEvent', event.nativeEvent)
    console.log('nativeEvent target', event.nativeEvent.target)  // 指向当前元素，即当前元素触发
    console.log('nativeEvent current target', event.nativeEvent.currentTarget) // 指向 document ！！！

}

}

export default EventDemo


**此时浏览器的显示效果如下：**


![event](https://img-blog.csdnimg.cn/50535e7617da4e9996e9ad8221acdf32.gif#pic_center)


依据以上内容，需要注意的点是：


* `event` 是合成事件 `SyntheticEvent` ，它能够模拟出来 `DOM` 事件所有的能力；
* `event` 是`React` 封装出来的，而 `event.nativeEvent` 是原生事件对象；
* 所有的事件，都会被挂载到 `document` 上；
* `React` 中的事件，和 `DOM` 事件不一样，和 `Vue` 事件也不一样。


#### （3）传递自定义参数


**先来看一段代码：**

import React from ‘react’

class EventDemo extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ‘zhangsan’,
list: [
{
id: ‘id-1’,
title: ‘标题1’
},
{
id: ‘id-2’,
title: ‘标题2’
},
{
id: ‘id-3’,
title: ‘标题3’
}
]
}
}
render() {
// 传递参数 - 用 bind(this, a, b)
return

{this.state.list.map((item, index) => {
return <li key={item.id} onClick={this.clickHandler4.bind(this, item.id, item.title)}>
index {index}; title {item.title}

})}

}
// 传递参数
clickHandler4(id, title, event) {
console.log(id, title)
console.log(‘event’, event) // 最后追加一个参数，即可接收 event
}
}

export default EventDemo


此时，**浏览器的显示效果为：**


![传递参数](https://img-blog.csdnimg.cn/e61951374ede46f881217184c8cb0ea4.png#pic_center)


大家可以看到，我们通过使用 `this.clickHandler4.bind(this, item.id, item.title)` 这种形式来对 `react` 中的事件进行参数传递。


#### （4）注意点


* `React 16` 将事件绑定到 `document` 上；
* `React 17` 将事件绑定到 `root` 组件上；
* 这样做的好处在于：有利于多个 `React` 版本并存，例如**微前端**。


**如下图所示：**


![react16和17中事件的不同](https://img-blog.csdnimg.cn/7a7454902b2c412cac412300d8892ced.png#pic_center)


### 5、表单


#### （1）受控组件


先来看一段代码：

import React from ‘react’

class FormDemo extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ‘星期一研究室’,
info: ‘个人信息’,
city: ‘GuangDong’,
flag: true,
gender: ‘female’
}
}
render() {

    // 受控组件
    return <div>
        <p>{this.state.name}</p>
        <label htmlFor="inputName">姓名：</label> {/\* 用 htmlFor 代替 for \*/}
        <input id="inputName" value={this.state.name} onChange={this.onInputChange}/>
    </div>
}
onInputChange = (e) => {
    this.setState({
        name: e.target.value
    })
}

}

export default FormDemo


**此时浏览器的显示效果如下：**


![受控组件](https://img-blog.csdnimg.cn/ce9074944ceb41dc98c90b877a09145e.gif#pic_center)


在 `react` 中，通过使用 `onChange` 事件来手动修改 `state` 里面的值。


#### （2）input textarea select 用value


上面我们已经讲解了 `input` ，接下来我们来看 `textarea` 和 `select` 。


先来看 `textarea` 相关的代码：

import React from ‘react’

    // textarea - 使用 value
    return <div>
        <textarea value={this.state.info} onChange={this.onTextareaChange}/>
        <p>{this.state.info}</p>
    </div>
}
onTextareaChange = (e) => {
    this.setState({
        info: e.target.value
    })
}

}

export default FormDemo


**此时浏览器的打印效果是：**


![textarea](https://img-blog.csdnimg.cn/167aca33cccb4e87a341514d5cc53fd8.gif#)


同样地， `textarea` 也是用 `value` 和 `onChange` 来对**值**进行绑定。




---


继续来看 `select` 。**具体代码如下：**

import React from ‘react’

    // textarea - 使用 value
    return <div>
        <textarea value={this.state.info} onChange={this.onTextareaChange}/>
        <p>{this.state.info}</p>
    </div>
}
onSelectChange = (e) => {
    this.setState({
        city: e.target.value
    })
}

}

export default FormDemo


此时，**浏览器的显示效果为：**


![select](https://img-blog.csdnimg.cn/af6a0cf9f0354c478f1fd5be00a6dc12.gif#)


与 `input` 和 `textarea` 一样，也是通过操作 `value` 和 `onChange` ，来改变最终的值。


#### （3）checkbox radio 用 checked


先来看 `ckeckbox` 。**代码如下：**

import React from ‘react’

    // checkbox
    return <div>
        <input type="checkbox" checked={this.state.flag} onChange={this.onCheckboxChange}/>
        <p>{this.state.flag.toString()}</p>
    </div>
}
onCheckboxChange = () => {
    this.setState({
        flag: !this.state.flag
    })
}

}

export default FormDemo


**此时浏览器的显示效果为：**


![checkbox](https://img-blog.csdnimg.cn/1e01bedc3b4042ac9cf587f3506d2336.gif#)


在上面的代码中， `checkbox` 通过操作 `checked` 和 `onChange` ，来改变 `state` 的值。




---


`radio` 也是类似，**如下代码所示：**

import React from ‘react’

    // radio
    return <div>
        male <input type="radio" name="gender" value="male" checked={this.state.gender === 'male'} onChange={this.onRadioChange}/>
        female <input type="radio" name="gender" value="female" checked={this.state.gender === 'female'} onChange={this.onRadioChange}/>
        <p>{this.state.gender}</p>
    </div>
}
onRadioChange = (e) => {
    this.setState({
        gender: e.target.value
    })
}

}

export default FormDemo


**此时浏览器的显示效果是：**


![radio](https://img-blog.csdnimg.cn/8d5488b0bbe442e197ac40acda1091ce.gif#)


### 6、组件使用


对于父子组件的使用来说，我们需要明白三个知识点：`props` 传递数据、`props` 传递函数和 `props` 类型检查。


**先来看一段代码：**

import React from ‘react’
import PropTypes from ‘prop-types’

class Input extends React.Component {
constructor(props) {
super(props)
this.state = {
title: ‘’
}
}
render() {
return

提交

}
onTitleChange = (e) => {
this.setState({
title: e.target.value
})
}
onSubmit = () => {
const { submitTitle } = this.props
submitTitle(this.state.title)

    this.setState({
        title: ''
    })
}

}
// props 类型检查
Input.propTypes = {
submitTitle: PropTypes.func.isRequired
}

class List extends React.Component {
constructor(props) {
super(props)
}
render() {
const { list } = this.props

    return <ul>{list.map((item, index) => {
        return <li key={item.id}>
            <span>{item.title}</span>
        </li>
    })}</ul>
}

}
// props 类型检查
// 通过propTypes可以清楚地知道list需要一个什么类型的数据
List.propTypes = {
list: PropTypes.arrayOf(PropTypes.object).isRequired
}

class Footer extends React.Component {
constructor(props) {
super(props)
}
render() {
return

{this.props.text}
{this.props.length}

}
componentDidUpdate() {
console.log(‘footer did update’)
}
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.text !== this.props.text
|| nextProps.length !== this.props.length) {
return true // 可以渲染
}
return false // 不重复渲染
}

// React 默认：父组件有更新，子组件则无条件也更新！！！
// 性能优化对于 React 更加重要！
// SCU 一定要每次都用吗？—— 需要的时候才优化（SCU即shouldComponentUpdate）

}

// 父组件
class TodoListDemo extends React.Component {
constructor(props) {
super(props)
// 状态（数据）提升
// list的数据需要放在父组件
this.state = {
list: [
{
id: ‘id-1’,
title: ‘标题1’
},
{
id: ‘id-2’,
title: ‘标题2’
},
{
id: ‘id-3’,
title: ‘标题3’
}
],
footerInfo: ‘底部文字’
}
}
render() {
return

}
onSubmitTitle = (title) => {
this.setState({
list: this.state.list.concat({
id: id-${Date.now()},
title
})
})
}
}

export default TodoListDemo


**此时浏览器的显示效果如下：**


![组件使用-props](https://img-blog.csdnimg.cn/4b4396f40246469193064dee43314bc7.gif#)


依据以上代码，我们来对 `props` 的各个类型进行介绍。


#### （1）props 传递数据


最后一个 `TodoListDemo` 是父组件，其他都是子组件。在 `Input` 组件和 `List` 组件中，我们将 `props` 属性的内容，以 `this.props.xxx` 的方式，传递给**父组件**。


#### （2）props 传递函数


`React` 在传递函数这一部分和 `vue` 是不一样的。对于 `vue` 来说，如果有一个父组件要传递函数给子组件，子组件如果想要触发这个函数，那么需要使用事件传递和 `$emit` 的方式来解决。


大家定位到 `Input` 组件中，在这里，我们将 `submitTitle` 以函数的形式，传递给父组件中的 `onSubmitTitle` 。


#### （3）props 类型检查


大家定位到两处 `props` 类型检查的地方。使用 `react` 中的 `PropTypes` ，我们可以对当前所使用的属性进行一个类型检查。比如说： `submitTitle: PropTypes.func.isRequired` 表明的是， `submitTitle` 是一个函数，并且是一个必填项。


就这样，通过上面的例子，我们学习了**属性传递**、**属性验证**以及**父组件和子组件之间怎么通过传事件的形式来进行通信**。


### 7、setState


#### （1）不可变值


所谓不可变值，即所设置的值永不改变。那这个时候，我们就需要去创建一个副本，来设置 `state` 的值。


来看几个要点：


第一点：**state** 要在构造函数中定义。**如下代码所示：**

import React from ‘react’

// 函数组件，默认没有 state
class StateDemo extends React.Component {
constructor(props) {
super(props)

    // 第一，state 要在构造函数中定义
    this.state = {
        count: 0
    }
}
render() {
    return <div>
        <p>{this.state.count}</p>
    </div>
}

}

export default StateDemo


第二点，不要直接修改 **state** ，要使用不可变值。**如下代码所示：**

import React from ‘react’

// 函数组件，默认没有 state
class StateDemo extends React.Component {
constructor(props) {
super(props)

    // 第一，state 要在构造函数中定义
    this.state = {
        count: 0
    }
}
render() {
    return <div>
        <p>{this.state.count}</p>
    	<button onClick={this.increase}>累加</button>
    </div>
}
increase= () => {
    // 第二，不要直接修改 state，使用不可变值
    // this.state.count++ // 错误写法，会直接修改原来的值
    this.setState({
        count: this.state.count + 1 // ShouldComponentUpdate → SCU
    })
}

}

export default StateDemo


大家可以看到，在上面的代码中，我们通过 `this.state({})` 这种形式，来修改 `state` 的值。值得注意的是，很多小伙伴会直接使用 `this.state.count++` 来修改 `state` 的值，这在 `react` 中是非常不允许的。因此，要注意这个要点。


第三点，在 `react` 中操作**数组**的值。**如下代码所示：**

// 不可变值（函数式编程，纯函数） - 数组
const list5Copy = this.state.list5.slice()
list5Copy.splice(2, 0, ‘a’) // 中间插入/删除
this.setState({
list1: this.state.list1.concat(100), // 追加
list2: […this.state.list2, 100], // 追加
list3: this.state.list3.slice(0, 3), // 截取
list4: this.state.list4.filter(item => item > 100), // 筛选
list5: list5Copy // 其他操作
})
// 注意，不能直接对 this.state.list 进行 push pop splice 等，这样违反不可变值


第四点，在 `react` 中操作**对象**的值。**如下代码所示：**

// 不可变值 - 对象
this.setState({
obj1: Object.assign({}, this.state.obj1, {a: 100}),
obj2: {…this.state.obj2, a: 100}
})
// 注意，不能直接对 this.state.obj 进行属性设置，即 this.state.obj.xxx 这样的形式，这种形式会违反不可变值


#### （2）可能是异步更新


`react` 中的 `state` ，有可能是异步更新。**来看一段代码：**

import React from ‘react’