React组件三大属性state,props,refs
阅读原文时间:2023年08月09日阅读:2

1. React组件定义

函数组件是一种简单的定义组件的方式,通过一个JavaScript函数来定义组件。函数接收一个props对象作为参数,并返回一个React元素作为输出。

1
2


3
4
5
6
7
8
9
10
11

代码的中提到了简单组件。简单组件(Simple Components):简单组件通常是功能较为单一、结构简单的组件,其主要目的是封装一部分可复用的UI逻辑。它们通常是函数组件或者使用ES6箭头函数定义的函数组件。简单组件没有自己的状态(state),并且通常依赖于父组件传递的props来进行渲染。

类组件是使用ES6类语法定义的组件。类组件继承自React.Component类,并通过render()方法返回一个React元素。类组件可以拥有状态(state)和生命周期方法。

1
2


3
4
5
6
7
8
9
10
11

代码的中提到了复杂组件。复杂组件(Complex Components):复杂组件通常包含更多的逻辑和状态管理,可能由多个简单组件组成。它们通常是类组件或使用Hooks和其他高级特性定义的组件。复杂组件可以处理更多的数据和交互,并且在其内部可能包含自己的状态。

2. 组件三大属性之state

在类组件中,可以通过在组件的构造函数中初始化this.state来定义初始状态。state是一个普通的JavaScript对象,其中包含组件的各个状态属性及其初始值(可以部分地理解为类似Vue的响应式数据)。状态属性可以根据需要定义多个,并且可以通过this.setState()方法来更新状态,通过更新组件的state可以更新对应的页面显示(重新渲染组件)。

1
2


3
4
5
6
7
8
9
10
11

以上代码是state的使用和修改。其中使用了一个类组件Weather,实现了点击切换天气文字的效果。其中类组件中必须完成的方法是render方法,render方法会在生成组件实例后,让组件实例去调用,所以this会指向组件实例。而类中的自定义方法,changeWeather()则是作为点击事件的回调,调用者并非是组件实例对象,所以直接使用会出现this指向的问题。这里有2个解决办法,1. 如上文显示,利用bind改变函数指向。2.利用ES6的箭头函数,让函数没有this而去使用上一级的this。

这里的bind和构造器显得过于复杂冗余,在类里面定义state属性可以不需要构造器直接定义,函数也用箭头函数写出。以下是简写形式

1 class Weather extends React.Component{
2 //初始化状态
3 state = {isHot:false,wind:'微风'}
4
5 render(){
6 const {isHot,wind} = this.state
7 return

今天天气很{isHot ? '炎热' : '凉爽'},{wind}


8 }
9
10 //自定义方法————要用赋值语句的形式+箭头函数
11 changeWeather = ()=>{
12 const isHot = this.state.isHot
13 this.setState({isHot:!isHot})
14 }
15 }

这里注意到,对state的操作都必须用setState来完成,不能直接使用赋值语句去修改。直接修改state会导致react无法监测到数据的变化而不能重新渲染视图。

2.2.1 为什么要使用setState?

在React中,要通知React重新渲染界面,我们需要使用setState来更新组件的状态。React并没有像Vue那样实现数据劫持或使用类似于Object.defineProperty或Proxy的方式来自动监听数据的变化。

通过调用setState函数,我们显式地告诉React组件的状态已经发生了变化,然后React会根据最新的状态值来重新渲染组件。这是因为React使用了虚拟DOM的概念,它会比较前后两个虚拟DOM树的差异,并只更新必要的部分,以提高性能。

使用this.state直接修改状态的方式是不推荐的,因为React无法追踪到这种变化。相反,我们应该使用setState函数来更新状态,这样React才能捕捉到状态的变化并进行相应的重新渲染。

总结来说,React确实需要通过setState来通知它数据已经发生了变化,从而触发重新渲染,而不会自动对数据进行监听或数据劫持。这种方式可以更好地控制和优化渲染过程,同时提供更好的性能。

2.2.2 参数及用法

setState(stateChange, [callback])------ 对象式的setState 第1个参数stateChange为状态改变对象(该对象可以体现出状态的更改) 第2个参数callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用。上面所用到的都是只用了第一个参数。setState修改数据的方式是合并对象而不是替换对象,这个也很好理解,如果不是合并而是替换,每次修改一个属性值就需要在setState中写入其他所有属性值,不符合正常的逻辑。setState对于数据的更新在React事件和组件的生命周期中是异步的,也就是说无法在setState后马上获取新的数据

1 export class App extends Component {
2 constructor() {
3 super()
4
5 this.state = {
6 message: "Hello World"
7 }
8 }
9
10 changeText() {
11 // 用法一
12 this.setState({
13 message: "你好啊"
14 })
15 console.log(this.state.message) // Hello World
16 }
17
18 render() {
19 const { message } = this.state
20 return (
21

22

{message}

23 24

25 )
26 }
27 }

以上代码显示出,打印结果仍然是未修改之前的值。而使用setState的回调就可以访问修改后的state。

1 export class App extends Component {
2 constructor() {
3 super()
4
5 this.state = {
6 message: "Hello World"
7 }
8 }
9
10 changeText() {
11 // 参数二回调函数可以保证拿到的数据是更新后的
12 this.setState({ message: "你好啊" }, () => {
13 console.log(this.state.message) // 你好啊
14 })
15 }
16
17 render() {
18 console.log("render函数执行")
19 const { message } = this.state
20 return (
21

22

{message}

23 24

25 )
26 }
27 }

2.2.3 如何使用setState?

  • 对象方式是函数方式的简写方式
  • 如果新状态不依赖于原状态 ===> 使用对象方式
  • 如果新状态依赖于原状态 ===> 使用函数方式
  • 如果需要在setState()后获取最新的状态数据, 在第二个callback函数中读取

2.2.4 为什么setState要设置成异步的?

原因一: setState设计为异步,可以显著的提升性能

React中的更新机制是基于批量更新的原理。在React中,当触发多个状态更新时,React会将这些更新收集起来,并将它们放入一个任务队列中。然后,在下一个时间段(例如事件循环的末尾)React会批量处理任务队列中的所有更新。用setState会让render函数重新执行, 如果每次调用 setState都进行一次更新,那么意味着render函数会被频繁调用,界面重新渲染,这样效率是很低的。

这种批量更新的机制有助于提高性能。通过将多个更新合并为单个更新,可以减少不必要的组件重新渲染次数,以及避免重复计算和布局操作。同时,这种批量更新机制也可以避免UI闪烁或不一致的问题,因为所有更新都会一起应用于组件。这意味着,即使在一个时间段内多次调用setState更新组件状态,React也会在适当的时机将这些更新合并为单个更新,并在批量处理过程中进行统一的更新操作。这样,React可以在一个更高效的上下文中处理状态变化并更新UI。

总结起来,React的更新机制是基于批量更新的原理,它通过将多个更新收集起来,并在适当的时机进行批量处理,以提高性能和避免不必要的重新渲染。这种机制确保了在一个时间段内的多次状态更新被合并,并在统一的更新过程中应用于组件。

例如下面代码, 当点击按钮时, render函数只会执行一次, 由此可见是有等待多个更新再进行批处理的

1 export class App extends Component {
2 constructor() {
3 super()
4
5 this.state = {
6 message: "Hello World"
7 }
8 }
9
10 changeText() {
11 this.setState({
12 message: "你"
13 })
14 this.setState({
15 message: "你好"
16 })
17 this.setState({
18 message: "你好啊"
19 })
20 }
21
22 render() {
23 console.log("render函数执行")
24 const { message } = this.state
25 return (
26

27

{message}

28 29

30 )
31 }
32 }

**原因二: 如果同步更新了state,但是还没有执行render函数,那么state和props不能保持同步
**

在React中,组件的render函数负责根据当前的state和props生成对应的UI。当状态更新时,React会触发组件的重新渲染,即执行render函数以生成新的UI。

然而,当我们直接修改state的值而没有调用setState函数时,React并不会立即检测到状态的变化,也不会自动触发重新渲染。这意味着,如果在同步更新state后立即访问props,那么props的值可能仍然是旧的值,与新的state不同步。

为了确保state和props的同步性,我们应该遵循React的更新机制,即使用setState函数来更新状态。通过setState,React会在适当的时机检测到状态的变化,并在下一次渲染时将新的state与props同步。

例如,在一个组件中,有一个名为message的数据被展示在页面上,并传递给子组件进行展示。然后通过调用setState同步地修改了message的值。如果在同步的修改完成后,message的值被改变了,但后续的代码中出现了报错的情况,这时候进行调试时会发现页面中的message值被修改,而传递给子组件的message并没有被修改,导致了组件的state和props中的数据不一致。

3. 组件三大属性之props

Props(属性)是在React中用于传递数据和配置信息的一种机制。组件可以通过props接收从父组件传递下来的数据,这样可以将数据从一个组件传递到另一个组件,实现组件之间的通信。

Props具有以下主要用途:

  1. 数据传递:通过props,父组件可以将数据传递给子组件。子组件可以使用这些数据来渲染自己的内容或执行其他操作。
  2. 配置信息:通过props,可以向组件传递配置信息,以便根据不同的配置渲染不同的内容或实现不同的行为。
  3. 参数设置:通过props,可以向组件传递参数,使组件能够根据传递的参数来决定其行为或呈现的样式。
  4. 动态数据更新:当props的值发生变化时,组件可以根据新的props值进行更新和重新渲染,从而实现动态数据的展示。
  5. Props的使用可以使组件更具灵活性和可重用性,因为组件可以根据传递的不同props来呈现不同的结果。同时,通过明确定义props的类型,可以提高代码的可读性和可维护性,并提供类型安全性。

下面代码是类组件里props的基本使用,通过在标签上写属性来完成props的传值,在组件内部使用this.props接收

1 class Person extends React.Component{
2 render(){
3 // console.log(this);
4 const {name,age,sex} = this.props
5 return (
6

    7
  • 姓名:{name}
  • 8
  • 性别:{sex}
  • 9
  • 年龄:{age+1}
  • 10

11 )
12 }
13 }
14 //渲染组件到页面
15 ReactDOM.render(,document.getElementById('test1'))
16 ReactDOM.render(,document.getElementById('test2'))
17
18 const p = {name:'老刘',age:18,sex:'女'}
19 // console.log('@',…p);
20 // ReactDOM.render(,document.getElementById('test3'))
21 ReactDOM.render(,document.getElementById('test3'))

在使用JS编写react代码时,我们也可以通过一些方式完成props的类型检查和一些限制,引入prop-types,用于对组件标签属性进行限制。其中propTypes 用于限制props的类型,而defaultProps用于给出一些默认值

1
2
3

以上的props的书写过于复杂,对于JS的类,可以使用static写在class内部。props也可以通过构造函数传参获取,以下是props的简写形式

1 class Person extends React.Component{
2
3 constructor(props){
4 //构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访问props
5 // console.log(props);
6 super(props)
7 console.log('constructor',this.props);
8 }
9
10 //对标签属性进行类型、必要性的限制
11 static propTypes = {
12 name:PropTypes.string.isRequired, //限制name必传,且为字符串
13 sex:PropTypes.string,//限制sex为字符串
14 age:PropTypes.number,//限制age为数值
15 }
16
17 //指定默认标签属性值
18 static defaultProps = {
19 sex:'男',//sex默认值为男
20 age:18 //age默认值为18
21 }
22
23 render(){
24 // console.log(this);
25 const {name,age,sex} = this.props
26 //props是只读的
27 //this.props.name = 'jack' //此行代码会报错,因为props是只读的
28 return (
29

    30
  • 姓名:{name}
  • 31
  • 性别:{sex}
  • 32
  • 年龄:{age+1}
  • 33

34 )
35 }
36 }

除了类组件以外,函数组件也可以使用props完成基本的传值

1 function Person (props){
2 const {name,age,sex} = props
3 return (
4

    5
  • 姓名:{name}
  • 6
  • 性别:{sex}
  • 7
  • 年龄:{age}
  • 8

9 )
10 }
11 Person.propTypes = {
12 name:PropTypes.string.isRequired, //限制name必传,且为字符串
13 sex:PropTypes.string,//限制sex为字符串
14 age:PropTypes.number,//限制age为数值
15 }
16
17 //指定默认标签属性值
18 Person.defaultProps = {
19 sex:'男',//sex默认值为男
20 age:18 //age默认值为18
21 }
22 //渲染组件到页面
23 ReactDOM.render(,document.getElementById('test1'))

在React中,props是用于从父组件向子组件传递数据的一种机制。props被设计为只读的,即子组件无法直接修改传递给它的props。

这是因为React采用了单向数据流的原则,父组件作为数据的拥有者和管理者,通过props向子组件传递数据。子组件只能读取父组件传递的props数据,并基于这些数据进行渲染和交互。

保持props不可修改有以下好处:

  1. 数据单一来源:通过限制props的可修改性,确保数据的源头始终来自于父组件,避免了数据来源的混乱和不一致。
  2. 可预测性:当props是只读的时候,可以更容易地追踪和理解数据的流动,减少了副作用和意外的数据修改。
  3. 组件隔离性:通过限制子组件对props的修改,增强了组件的独立性和封装性,使其更易于测试、维护和复用。

如果子组件需要修改传递给它的数据,可以通过回调函数、状态管理库(如Redux或Mobx)等方式,让父组件来处理数据的修改,并通过props将修改后的数据传递给子组件。

4. 组件三大属性之refs

Refs(引用)是一种用于访问组件实例或DOM元素的机制。Refs提供了一种方式,让我们能够直接访问组件或DOM元素,并对其进行操作。组件内的标签可以定义ref属性来标识自己。

Refs的主要用途包括:

  1. 访问组件实例:通过Refs,我们可以获取到组件的实例,从而可以直接调用组件的方法或访问其属性。
  2. 操作DOM元素:Refs允许我们访问和操作渲染到页面上的DOM元素。我们可以使用Refs来获取DOM节点的引用,并对其进行操作,例如修改样式、添加事件监听器等。

Refs的使用方法有3种形式:字符串形式,回调函数形式,createRef。

字符串形式:直接在标签里写属性类似于 ref=“名字”的方式,在组件里使用this.refs获取

1 class Demo extends React.Component{
2 //展示左侧输入框的数据
3 showData = ()=>{
4 const {input1} = this.refs
5 alert(input1.value)
6 }
7 //展示右侧输入框的数据
8 showData2 = ()=>{
9 const {input2} = this.refs
10 alert(input2.value)
11 }
12 render(){
13 return(
14

15   16   17 18

19 )
20 }
21 }

在代码中字符串形式的ref非常的简单易懂,但是react官方的文档中却已经不推荐使用字符串形式的ref了,并且提出了一些可能存在的问题,主要是与性能方面相关,具体的讨论区链接如下:https://github.com/facebook/react/pull/8333#issuecomment-271648615

回调形式:在ref中使用回调函数来定义ref,把ref绑定到this上。

回调形式的Refs(回调Refs)在React中具有以下几个优点:

1 class Demo extends React.Component{
2 //展示左侧输入框的数据
3 showData = ()=>{
4 const {input1} = this
5 alert(input1.value)
6 }
7 //展示右侧输入框的数据
8 showData2 = ()=>{
9 const {input2} = this
10 alert(input2.value)
11 }
12 render(){
13 return(
14

15 this.input1 = c } type="text" placeholder="点击按钮提示数据"/>  16   17 this.input2 = c } type="text" placeholder="失去焦点提示数据"/>  18

19 )
20 }
21 }

回调形式的ref在更新过程中它会被执行两次,第一次传入参数 null,然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例,所以 React 清空旧的 ref 并且设置新的。传入的null是为了确保清空旧的ref,而第二次传入新的元素则是设置ref。

以下代码可以用于测试ref回调的执行次数,在每次执行回调时都会打印结果

1 class Demo extends React.Component{
2
3 state = {isHot:false}
4
5 showInfo = ()=>{
6 const {input1} = this
7 alert(input1.value)
8 }
9
10 changeWeather = ()=>{
11 //获取原来的状态
12 const {isHot} = this.state
13 //更新状态
14 this.setState({isHot:!isHot})
15 }
16
17
18
19 render(){
20 const {isHot} = this.state
21 return(
22

23

今天天气很{isHot ? '炎热':'凉爽'}

24 {this.input1 = c;console.log('@',c);}} type="text"/>

25 26 27

28 )
29 }
30 }

图中的打印结果显示执行了2次回调

createRef方法:React.createRef方法可以创建ref并且给组件实例使用,这个方法会创建一个容器,该容器存放的是可以被ref所标识的节点,这个容器是专用的。

1 class Demo extends React.Component{
2 /*
3 React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的
4 */
5 myRef = React.createRef()
6 myRef2 = React.createRef()
7 //展示左侧输入框的数据
8 showData = ()=>{
9 console.log(this.myRef);
10 alert(this.myRef.current.value);
11 }
12 //展示右侧输入框的数据
13 showData2 = ()=>{
14 alert(this.myRef2.current.value);
15 }
16 render(){
17 return(
18

19   20   21   22

23 )
24 }
25 }