2024年最新探秘react，一文弄懂react的基本使用和高级特性，java开发工程师面试问题大全及答案大全

最新推荐文章于 2024-07-27 17:56:15 发布

2401_84689454

最新推荐文章于 2024-07-27 17:56:15 发布

阅读量420

点赞数 5

分类专栏：程序员文章标签： java 面试学习

本文链接：https://blog.csdn.net/2401_84689454/article/details/138624021

版权

程序员专栏收录该内容

113 篇文章 0 订阅

订阅专栏

总结

如果你选择了IT行业并坚定的走下去，这个方向肯定是没有一丝问题的，这是个高薪行业，但是高薪是凭自己的努力学习获取来的，这次我把P8大佬用过的一些学习笔记（pdf）都整理在本文中了

《Java中高级核心知识全面解析》

小米商场项目实战，别再担心面试没有实战项目：

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

    </p>
}
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’