📘前言

🚩🚩🚩

💎个人主页: 阿选不出来

💨💨💨

💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记.

💨💨💨

💎目前开发的专栏: JS 🍭Vue🍭React🍭

💨💨💨

📖1.state

state是组件对象最重要的属性                ，值是对象（可以包含多个key-value的组合）                。

组件被成为“状态机                ” 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，通过更新组件的state来更新对应的页面显示（重新渲染组件） 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
。

一                、定义state














，访问state

写法一（常用 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
、简写）

直接向class App添加state属性

import React, { Component } from react export default class App extends Component { // ====定义state写法一==== state = { isCollect: false, myname:"Kerwin" } render() { return ( <div> <h1>欢迎来到react开发-{this.state.myname}</h1> </div> ) } }

写法二（了解）

使用构造器
  
  
  
  
  
  
  
  ，初始化一个state属性

import React, { Component } from react export default class App extends Component { // ====定义state写法二==== constructor(){ super() this.state = { isCollect:false, myname:"Kerwin" } } render() { return ( <div> <h1>欢迎来到react开发-{this.state.myname}</h1> </div> ) }

二














、修改state

想要修改state中的数据 
  
  
  
  
  
  
  
，我们就需要自定义一个修改state的方法














。

如何自定义这个方法并且调用？

关键点在于 


 


 


 


 


 


 


 

，this指向应为App这个类的实例对象

... render(){ {/* 法一 */} <button onClick={this.handleAddClick}>add</button> {/* 法二 */} <button onClick={this.handleDelClick(index)}>delete</button> } handleAddClick= ()=>{} handleDelClick(){}

如何修改state对象中的数据?

state状态数据
 
 
 
 
 
 
 
 ，不支持直接修改或更新！需要借助setState！

📑setState

this.state 是纯js对象  
   
   
   
   
   
   
   
，在Vue中 

 

 

 

 

 

 

 
，data属性是利用object.defineProperty 处理过的

 

 

 

 

 

 

 

 ，更改data的数据的时候会触发数据的getter和setter               ，但是React中没有做这样的处理 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，如果直接更改的话















，react是无法得知的                       ，所以 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，需要使用特殊的更改状态的方法 setState
  
  
  
  
  
  
  
  。

实例：

修改state.isHot 的值 
  
  
  
  
  
  
  
。

... state = {isHot: true,wind: 微风} render(){ return ( <div> <h1 onClick={this.changeWeather}>天气：{this.state.isHot}-{this.state.wind}</h1> </div> ) } ... changeWeather = ()=>{ const isHot = this.state.isHot this.setState({isHot:!isHot}) } ...

此处state被修改后的结果为： state = {isHot: false, wind:微风}

setState可以更新state ,且更新是一种合并不是替换！

特别注意：不能直接修改状态（state）






















，可能会造成不可预期的后果！

扩展：

假如state属性中存有一个数组                ，如何修改这个数组的值呢？

state = { list: [aaa,bbb,ccc] }

切记不能写成这样!!

const newlist = this.state.list newlist.push(ddd)

解决办法：

由于我们不能直接修改state中的数据 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，所以需要将 list 这个数组深复制一份














，对复制得来的新数组进行修改并使用setState传入 


 


 


 


 


 


 


 

。

//法一 const newlist = [...this.state.list] //法二 const newlist = this.state.list.concat() //法三 const newlist = this.state.list.slice() //...

setState更新状态不总是异步的
 
 
 
 
 
 
 
 。

setState还接收第二个参数
  
  
  
  
  
  
  
  ，第二个参数是回调函数 
  
  
  
  
  
  
  
，当状态和 dom更新完后就会被触发  
   
   
   
   
   
   
   
。

📖2.props

props是从外部传入的 


 


 


 


 


 


 


 

，组件内部也可以通过一些方式来初始化的设置
 
 
 
 
 
 
 
 ，属性不能被组件自己更改  
   
   
   
   
   
   
   
，但是你可以通过父组件主动重新渲染的方式传入新的 props 

 

 

 

 

 

 

 
。

1.传递单个属性

在组件上采用 key=value的形式写下属性 

 

 

 

 

 

 

 
，子组件通过 this.props获取属性

 

 

 

 

 

 

 

 。

<Person name="Alice"></Person> const {name} = this.props

2.批量传递属性

使用展开运算符

const p = {name:Alice,age:23,sex:女} ... <Person {...p}></Person>

注意：在原生js下

 

 

 

 

 

 

 

 ，使用展开运算符展开一个对象               ，这种写法是会报错的               。

但在babel和react的影响下 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，这种写法不会报错















，展开运算符也可以展开一个对象了                       ，但仅仅适用于标签语法中 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
。

📑对props进行限制

首先需要引入

import PropTypes from prop-types

写法一：

写在类的内部

static propTypes = { 标签属性：限制 }

写法二：

写在类的外部

类名.propTypes = { //... }

对标签属性进行类型限制

import PropTypes from prop-types ... static propTypes = { name: PropTypes.string, //限制name属性为字符串类型 age: PropTypes.number, //限制age为数值 speak: PropTypes.func, //限制speak为函数 isStudent: PropTypes.bool, //限制isStudent为布尔值 }

对属性进行必要性限制

PropTypes.string.isRequired

📑对props设置默认值

引入

import PropTypes from prop-types

写法一：

写在类的内部

static defaultProps = { 标签属性：默认值 }

写法二：

写在类的外部

类名.defaultProps = { //... }

例：

import PropTypes from prop-types ... static propTypes = { age:18 //默认age为18 }

props 不能在子组件修改!!!

📑state与props的区别

state的主要作用是用于组件保存
  
  
  
  
  
  
  
  、控制 
  
  
  
  
  
  
  
、修改自己的可变状态















。state在组件内部初始化 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，可以被组件自身修改






















，而外部不能修改也不能访问                       。你可以认为 state是一个局部的 


 


 


 


 


 


 


 

、只能被组件自身控制的数据源 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
。 state中状态可以通过 this.setState方法进行更新                ，setState会导致组件的重新渲染






















。

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














，否则组件的 props永远保持不变














。

没有 state的组件叫无状态组件（stateless component）
  
  
  
  
  
  
  
  ，设置了state的叫做有状态组件（stateful component）
  
  
  
  
  
  
  
  。因为状态会带来管理的复杂性 
  
  
  
  
  
  
  
，我们尽量多地写无状态组件 


 


 


 


 


 


 


 

，尽量少地写有状态地组件 
  
  
  
  
  
  
  
。这样会降低代码维护地难度
 
 
 
 
 
 
 
 ，也会在一定程度上增强组件的可复用性 


 


 


 


 


 


 


 

。

📖3.ref

给标签设置ref=“username 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
”

​ 通过这个获取this.refs.username  
   
   
   
   
   
   
   
，ref可以获取到应用的真实dom
 
 
 
 
 
 
 
 。

给组件设置ref=“username














”

​ 通过这个获取this.refs.username 

 

 

 

 

 

 

 
，ref可以获取组件对象  
   
   
   
   
   
   
   
。

新的写法

myRef = React.createRef() ... <div ref={this.myref}>hello</div> <button onClick={()=>{ //访问 console.log(this.myref.current) }}></button>

React.createRef调用后可以返回一个容器

 

 

 

 

 

 

 

 ，该容器可以存储被Ref所标识的节点               ，该容器“专人专用
  
  
  
  
  
  
  
  ” 

 

 

 

 

 

 

 
。