前端技术笔记系列：React学习笔记（二）_千锋 react教程笔记(1)

最新推荐文章于 2024-09-01 02:07:48 发布

2401_84302722

最新推荐文章于 2024-09-01 02:07:48 发布

阅读量239

点赞数 5

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

本文链接：https://blog.csdn.net/2401_84302722/article/details/138298266

版权

程序员专栏收录该内容

147 篇文章 0 订阅

订阅专栏

本文介绍了React组件开发中的关键概念，如如何设置defaultProps、使用props.children处理嵌套组件、使用prop-types检查props类型、状态(state)的定义与setState方法，以及属性与状态的区别。同时提到了状态提升的重要性和资源分享。

摘要由CSDN通过智能技术生成

<p>{props.name}是一个构建UI的库</p>

)
}

class App extends Component {
render () {
return (

 ) } } ReactDOM.render( , document.getElementById(‘root’) ) <pre><code> #### 设置组件的默认props </code></pre> import React, { Component, Fragment } from ‘react’ import ReactDOM from ‘react-dom’ class Title extends Component { // 使用类创建的组件，直接在这里写static方法，创建defaultProps static defaultProps = { name: ‘React’ } render () { return ( <h1>欢迎进入{this.props.name}的世界</h1> ) } } const Content = (props) => { return ( {props.name}是一个构建UI的库 ) } // 使用箭头函数创建的组件，需要在这个组件上直接写defaultProps属性 Content.defaultProps = { name: ‘React.js’ } class App extends Component { render () { return ( {/* 由于设置了defaultProps，不传props也能正常运行，如果传递了就会覆盖defaultProps的值 */} <title/> ) } } ReactDOM.render( , document.getElementById(‘root’) ) <pre><code> #### **props.children** 我们知道使用组件的时候，可以嵌套。要在自定义组件的使用嵌套结构，就需要使用 `props.children` 。在实际的工作当中，我们几乎每天都需要用这种方式来编写组件。 </code></pre> import React, { Component, Fragment } from ‘react’ import ReactDOM from ‘react-dom’ class Title extends Component { render () { return ( <h1>欢迎进入{this.props.children}的世界</h1> ) } } const Content = (props) => { return ( {props.children} ) } class App extends Component { render () { return ( <title>React
React.js是一个构建UI的库

)
}
}

ReactDOM.render(
,
document.getElementById(‘root’)
)


#### **使用prop-types检查props**


React其实是为了构建大型应用程序而生, 在一个大型应用中，根本不知道别人使用你写的组件的时候会传入什么样的参数，有可能会造成应用程序运行不了，但是不报错。为了解决这个问题，React提供了一种机制，让写组件的人可以给组件的`props`设定参数检查，需要安装和使用[prop-types](https://bbs.csdn.net/topics/618540462):

$ npm i prop-types -S


#### 状态(state)


状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)


#### 定义state


第一种方式

import React, { Component } from ‘react’
import ReactDOM from ‘react-dom’

class App extends Component {
state = {
name: ‘React’,
isLiked: false
}
render () {
return (

欢迎来到{this.state.name}的世界

{
this.state.isLiked ? ‘❤️取消’ : ’ 收藏’
}

)
}
}
ReactDOM.render(
,
document.getElementById(‘root’)
)


另一种方式(推荐)

import React, { Component } from ‘react’
import ReactDOM from ‘react-dom’

class App extends Component {
constructor() {
super()
this.state = {
name: ‘React’,
isLiked: false
}
}
render () {
return (

欢迎来到{this.state.name}的世界

{
this.state.isLiked ? ‘❤️取消’ : ’ 收藏’
}

)
}
}
ReactDOM.render(
,
document.getElementById(‘root’)
)


`this.props`和`this.state`是纯js对象,在vue中，data属性是利用`Object.defineProperty`处理过的，更改data的数据的时候会触发数据的`getter`和`setter`，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法`setState`。


#### setState


`isLiked` 存放在实例的 `state` 对象当中，组件的 `render` 函数内，会根据组件的 `state` 的中的`isLiked`不同显示“取消”或“收藏”内容。下面给 `button` 加上了点击的事件监听。

import React, { Component } from ‘react’
import ReactDOM from ‘react-dom’

class App extends Component {
constructor() {
super()
this.state = {
name: ‘React’,
isLiked: false
}
}
handleBtnClick = () => {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
return (

欢迎来到{this.state.name}的世界

{
this.state.isLiked ? ‘❤️取消’ : ’ 收藏’
}

)
}
}
ReactDOM.render(
,
document.getElementById(‘root’)
)


`setState`有两个参数


第一个参数可以是对象，也可以是方法return一个对象，我们把这个参数叫做`updater`


* 参数是对象

this.setState({
isLiked: !this.state.isLiked
})


* 参数是方法

this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
})


  
 注意的是这个方法接收两个参数，第一个是上一次的state, 第二个是props


`setState`是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数

this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
}, () => {
console.log(‘回调里的’,this.state.isLiked)
})
console.log(‘setState外部的’,this.state.isLiked)


### **属性vs状态**


**相似点：**


都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）


**不同点：**


1. 属性能从父组件获取，状态不能
2. 属性可以由父组件修改，状态不能
3. 属性能在内部设置默认值，状态也可以
4. 属性不在组件内部修改，状态要改
5. 属性能设置子组件初始值，状态不可以
6. 属性可以修改子组件的值，状态不可以


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


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


如果搞不清 `state` 和 `props` 的使用场景，记住一个简单的规则：**尽量少地用** **`state`，多用**`**props**`。


没有 `state` 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。


##状态提升


**先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7**

**深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

**因此收集整理了一份《2024年最新网络安全全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。**
![img](https://img-blog.csdnimg.cn/img_convert/f81f4fc9716cfecd79099f61ed5b8ac2.png)
![img](https://img-blog.csdnimg.cn/img_convert/856406b004f83757660e5dcb57f3aa93.png)
![img](https://img-blog.csdnimg.cn/img_convert/0466d4ddec8beeb37f20896a84710f23.png)
![img](https://img-blog.csdnimg.cn/img_convert/14257e0fd67e861113058b102be09db8.png)
![img](https://img-blog.csdnimg.cn/img_convert/eb70b93a72dfb29e19150c87bab8e75b.png)
![img](https://img-blog.csdnimg.cn/img_convert/8b3f9d839fc704841ec199e19dd3b8c9.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上网络安全知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**
4334896471)]
[外链图片转存中...(img-0oYxz54p-1714334896471)]
[外链图片转存中...(img-4J7jEYaQ-1714334896472)]
[外链图片转存中...(img-uytbAJxh-1714334896472)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上网络安全知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**