React组件三大属性state，props，refs

以你之姓@ 2024-03-17 17:16 41阅读 0赞

*  [1. React组件定义][1. React]
    
     *  [1.1 函数组件（Function Components）][1.1 _Function Components]
     *  [1.2 类组件（Class Components）][1.2 _Class Components]
 *  [2. 组件三大属性之state][2. _state]
    
     *  [2.1 state的定义][2.1 state]
     *  [2.2 setState方法的使用][2.2 setState]
        
         *  [2.2.1 为什么要使用setState?][2.2.1 _setState]
         *  [2.2.2 参数及用法][2.2.2]
         *  [2.2.3 如何使用setState？][2.2.3 _setState]
         *  [2.2.4 为什么setState要设置成异步的？][2.2.4 _setState]
 *  [3. 组件三大属性之props][3. _props]
    
     *  [3.1 props定义][3.1 props]
     *  [3.2 props是只读的][3.2 props]
 *  [4. 组件三大属性之refs][4. _refs]
    
     *  [4.1 refs的定义][4.1 refs]

## 1. React组件定义 ##

### 1.1 函数组件（Function Components） ###

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

![f4cd7ca6b2f6cd9b977af0dae10891f1.gif][]

![cedc48608b3ee5bc8da9b233894f1267.gif][]

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

### 1.2 类组件（Class Components） ###

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

![92bae201a85eb0c207e5360370a4b1d5.gif][]

![38690d73b6c1d45d99d1b2cd9c0b94ea.gif][]

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

## 2. 组件三大属性之state ##

### 2.1 state的定义 ###

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

![a2344d4e4a23d3cf2b9447b999eb7daa.gif][]

1     
     2     <div id="test"></div>
     3     
     4     
     5     <script type="text/javascript" src="../js/react.development.js"></script>
     6     
     7     <script type="text/javascript" src="../js/react-dom.development.js"></script>
     8     
     9     <script type="text/javascript" src="../js/babel.min.js"></script>
    10 
    11     <script type="text/babel">
    12         //1.创建组件
    13         class Weather extends React.Component{
    14             
    15             //构造器调用1次
    16             constructor(props){
    17                 console.log('constructor');
    18                 super(props)
    19                 //初始化状态
    20                 this.state = {isHot:false,wind:'微风'}
    21                 //解决changeWeather中this指向问题
    22                 this.changeWeather = this.changeWeather.bind(this)
    23             }
    24 
    25             //render调用1+n次 1是初始化的那次 n是状态更新的次数
    26             render(){
    27                 console.log('render');
    28                 //读取状态
    29                 const {isHot,wind} = this.state
    30                 return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
    31             }
    32 
    33             //changeWeather调用几次？ ———— 点几次调几次
    34             changeWeather(){
    35                 //changeWeather放在Weather的原型对象上，供实例使用
    36                 //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
    37                 //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
    38                 
    39                 console.log('changeWeather');
    40                 //获取原来的isHot值
    41                 const isHot = this.state.isHot
    42                 //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
    43                 this.setState({isHot:!isHot})
    44                 console.log(this);
    45 
    46                 //严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
    47                 //this.state.isHot = !isHot //这是错误的写法
    48             }
    49         }
    50         //2.渲染组件到页面
    51         ReactDOM.render(<Weather/>,document.getElementById('test'))
    52                 
    53     </script>

![c9f971b70f4e8f9dc7f5504766f00c68.gif][]

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

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

![5d3bdb9597224260703a924217ed2b9f.gif][]

1     class Weather extends React.Component{
     2             //初始化状态
     3             state = {isHot:false,wind:'微风'}
     4 
     5             render(){
     6                 const {isHot,wind} = this.state
     7                 return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
     8             }
     9 
    10             //自定义方法————要用赋值语句的形式+箭头函数
    11             changeWeather = ()=>{
    12                 const isHot = this.state.isHot
    13                 this.setState({isHot:!isHot})
    14             }
    15         }

![20afbf2b22990dcc68176bd1242cf851.gif][]

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

### 2.2 setState方法的使用 ###

#### 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后马上获取新的数据

![4ce103cce798dc0cfda22eeceb5f159a.gif][]

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       <div>
    22         <h2>{message}</h2>
    23         <button onClick={() => {this.changeText()}}>按钮</button>
    24       </div>
    25     )
    26   }
    27 }

![25faa8f8161c92c06c8f59e0f52276af.gif][]

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

![8de1e5c39da9d552bbbe0bce1adf8282.gif][]

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       <div>
    22         <h2>{message}</h2>
    23         <button onClick={() => {this.changeText()}}>按钮</button>
    24       </div>
    25     )
    26   }
    27 }

![077bf60724788e9fbf9dec0d205bf520.gif][]

#### 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函数只会执行一次, 由此可见是有等待多个更新再进行批处理的

![1a4d802edf46a78e461e276936ef972e.gif][]

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       <div>
    27         <h2>{message}</h2>
    28         <button onClick={() => {this.changeText()}}>按钮</button>
    29       </div>
    30     )
    31   }
    32 }

![9379bc4d1d0bce51fa94df5b8a256015.gif][]

**`原因二`: 如果同步更新了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 ##

### 3.1 props定义 ###

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

Props具有以下主要用途：

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

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

![faaa02decea1e24f7b35cea195dc7ec4.gif][]

1         class Person extends React.Component{
     2             render(){
     3                 // console.log(this);
     4                 const {name,age,sex} = this.props
     5                 return (
     6                     <ul>
     7                         <li>姓名：{name}</li>
     8                         <li>性别：{sex}</li>
     9                         <li>年龄：{age+1}</li>
    10                     </ul>
    11                 )
    12             }
    13         }
    14         //渲染组件到页面
    15         ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,document.getElementById('test1'))
    16         ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))
    17 
    18         const p = {name:'老刘',age:18,sex:'女'}
    19         // console.log('@',...p);
    20         // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
    21         ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))

![3f339975331108d46a3b8254c442f129.gif][]

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

![c806c20bfa1a92e1d7eea001273384ca.gif][]

1 <script type="text/javascript" src="../js/prop-types.js"></script>
     2 
     3     <script type="text/babel">
     4         //创建组件
     5         class Person extends React.Component{
     6             render(){
     7                 // console.log(this);
     8                 const {name,age,sex} = this.props
     9                 //props是只读的
    10                 //this.props.name = 'jack' //此行代码会报错，因为props是只读的
    11                 return (
    12                     <ul>
    13                         <li>姓名：{name}</li>
    14                         <li>性别：{sex}</li>
    15                         <li>年龄：{age+1}</li>
    16                     </ul>
    17                 )
    18             }
    19         }
    20         //对标签属性进行类型、必要性的限制
    21         Person.propTypes = {
    22             name:PropTypes.string.isRequired, //限制name必传，且为字符串
    23             sex:PropTypes.string,//限制sex为字符串
    24             age:PropTypes.number,//限制age为数值
    25             speak:PropTypes.func,//限制speak为函数
    26         }
    27         //指定默认标签属性值
    28         Person.defaultProps = {
    29             sex:'男',//sex默认值为男
    30             age:18 //age默认值为18
    31         }
    32         //渲染组件到页面
    33         ReactDOM.render(<Person name={100} speak={speak}/>,document.getElementById('test1'))
    34         ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))
    35 
    36         const p = {name:'老刘',age:18,sex:'女'}
    37         // console.log('@',...p);
    38         // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
    39         ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
    40 
    41         function speak(){
    42             console.log('我说话了');
    43         }
    44     </script>

![992ada9d0ff0f3c603cc5b9808bdae26.gif][]

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

![b0699d31f85cf4eabe67ab4a24df1a8a.gif][]

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                     <ul>
    30                         <li>姓名：{name}</li>
    31                         <li>性别：{sex}</li>
    32                         <li>年龄：{age+1}</li>
    33                     </ul>
    34                 )
    35             }
    36         }

![6940f17db274a361c7c362cc439ce325.gif][]

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

![b5a1869f0d31f0fcf8e6ac60a3c5186e.gif][]

1 function Person (props){
     2             const {name,age,sex} = props
     3             return (
     4                     <ul>
     5                         <li>姓名：{name}</li>
     6                         <li>性别：{sex}</li>
     7                         <li>年龄：{age}</li>
     8                     </ul>
     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(<Person name="jerry"/>,document.getElementById('test1'))

![0c73136a2deee4594dd4a5f68c5e758f.gif][]

### 3.2 props是只读的 ###

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

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

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

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

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

## 4. 组件三大属性之refs ##

### 4.1 refs的定义 ###

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

Refs的主要用途包括：

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

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

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

![44ee9dd5e694862671b892404167e1ef.gif][]

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                     <div>
    15                         <input ref="input1" type="text" placeholder="点击按钮提示数据"/> 
    16                         <button onClick={this.showData}>点我提示左侧的数据</button> 
    17                         <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
    18                     </div>
    19                 )
    20             }
    21         }

![542d6cded42568a5995b6e7959841107.gif][]

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

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

回调形式的Refs（回调Refs）在React中具有以下几个优点：

1.  1.  灵活性：回调Refs允许我们执行自定义逻辑来处理引用的组件实例或DOM元素。通过回调函数，我们可以在组件挂载或卸载时捕获引用，并将其存储在合适的变量中。这使得我们可以根据需要灵活地访问和操作引用。
    2.  类型安全：回调Refs在TypeScript等静态类型检查工具中更具类型安全性。通过使用回调函数参数的类型注解，我们可以准确地指定引用的类型，以便在编译时捕获类型错误。
    3.  更好的可读性：通过将回调函数直接传递给ref属性，代码更加清晰易懂。我们可以直接在回调函数中访问引用，并在适当的时候将其存储在组件实例上，以便在其他方法中使用。
    4.  React生命周期兼容性：回调Refs与React的生命周期方法集成得更好。我们可以在组件的挂载、更新和卸载阶段使用回调Refs，以便在正确的时机进行引用的捕获和释放。
    5.  兼容未来的API改变：回调Refs是React推荐的方式，它们在React中被广泛使用，并且在未来的React版本中仍然会得到支持。使用回调Refs可以更好地保持代码的向后兼容性，并使您的代码能够跟随React的演进而进行适应。

![e13c584799cdd32fa04bf435a6c2fad3.gif][]

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                     <div>
    15                         <input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/> 
    16                         <button onClick={this.showData}>点我提示左侧的数据</button> 
    17                         <input onBlur={this.showData2} ref={c=> this.input2 = c } type="text" placeholder="失去焦点提示数据"/> 
    18                     </div>
    19                 )
    20             }
    21         }

![0cd1c3ef1bdda4fcefef69526056f117.gif][]

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

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

![b5a1869f0d31f0fcf8e6ac60a3c5186e.gif][]

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                     <div>
    23                         <h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
    24                         <input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>
    25                         <button onClick={this.showInfo}>点我提示输入的数据</button>
    26                         <button onClick={this.changeWeather}>点我切换天气</button>
    27                     </div>
    28                 )
    29             }
    30         }

![e3067b8f4944e51cc156dc0f2e52d15b.gif][]

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

![7653392b4f7914cf7a52a062ba9c07d6.png][]

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

![747bcb271ae0c66ee81361001849ab3c.gif][]

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                     <div>
    19                         <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/> 
    20                         <button onClick={this.showData}>点我提示左侧的数据</button> 
    21                         <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/> 
    22                     </div>
    23                 )
    24             }
    25         }

[1. React]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_label0
[1.1 _Function Components]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_lab2_0_0
[1.2 _Class Components]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_lab2_0_1
[2. _state]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_label1
[2.1 state]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_lab2_1_0
[2.2 setState]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_lab2_1_1
[2.2.1 _setState]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_label3_1_1_0
[2.2.2]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_label3_1_1_1
[2.2.3 _setState]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_label3_1_1_2
[2.2.4 _setState]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_label3_1_1_3
[3. _props]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_label2
[3.1 props]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_lab2_2_0
[3.2 props]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_lab2_2_1
[4. _refs]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_label3
[4.1 refs]: https://www.cnblogs.com/zhouchenkai/p/17503302.html#_lab2_3_0
[f4cd7ca6b2f6cd9b977af0dae10891f1.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/df6cfa0df4ec4b6c975c720418e5feaa.png
[cedc48608b3ee5bc8da9b233894f1267.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/b26e7acb2ec34172bacfa148082e9015.png
[92bae201a85eb0c207e5360370a4b1d5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/de53a62035ec49b99f2620eda6d1670e.png
[38690d73b6c1d45d99d1b2cd9c0b94ea.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/90011ea69d9448fa8898d51ee0838e42.png
[a2344d4e4a23d3cf2b9447b999eb7daa.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a6e8da7e5e73491094d57051e34f9359.png
[c9f971b70f4e8f9dc7f5504766f00c68.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/57ee9e1de2384b8095e3594f096b1719.png
[5d3bdb9597224260703a924217ed2b9f.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a24ea5c3204b4386bf3dbb8376420b69.png
[20afbf2b22990dcc68176bd1242cf851.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/31a59505de474f8b8dbfba0109292866.png
[4ce103cce798dc0cfda22eeceb5f159a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/1fe09028823a4a80aa12f8629e3a1622.png
[25faa8f8161c92c06c8f59e0f52276af.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a433197d241a40279d4ae406b35a6092.png
[8de1e5c39da9d552bbbe0bce1adf8282.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/8f655b1ef6cb4bd4bbef6b192927a312.png
[077bf60724788e9fbf9dec0d205bf520.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9d2b2cc87901483182b45a949e00f00e.png
[1a4d802edf46a78e461e276936ef972e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/6ed81d33b7814fe7a34a37296c3a199e.png
[9379bc4d1d0bce51fa94df5b8a256015.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/653b3f474ad34239bd3289f75cb2b79f.png
[faaa02decea1e24f7b35cea195dc7ec4.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/3a0a01491e1846ebb78efe7b4a3bf9c5.png
[3f339975331108d46a3b8254c442f129.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/fa768635919b4d2e876313999ab1a3c2.png
[c806c20bfa1a92e1d7eea001273384ca.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c5a8877cc5b749db8b742e4ddcb572d5.png
[992ada9d0ff0f3c603cc5b9808bdae26.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/443efb8d96f24250ae7a39f3396aff00.png
[b0699d31f85cf4eabe67ab4a24df1a8a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/19bc70ca222546d882fd518f615b3892.png
[6940f17db274a361c7c362cc439ce325.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/6242f389e0ab4e3c80bbb0c1ce6c1d1b.png
[b5a1869f0d31f0fcf8e6ac60a3c5186e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/51c517d0167b45bd8161df069c6ec5aa.png
[0c73136a2deee4594dd4a5f68c5e758f.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/53377d6a23804c2c846133d934d6940e.png
[44ee9dd5e694862671b892404167e1ef.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9637e51f8de44bbca7002438bceeb7af.png
[542d6cded42568a5995b6e7959841107.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/aa3b806042434ea28acfa635619bbb5e.png
[e13c584799cdd32fa04bf435a6c2fad3.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/53c788c98b2f46279e3b1e27c1214044.png
[0cd1c3ef1bdda4fcefef69526056f117.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/1245bddb88b94b189d714305405d3a7e.png
[e3067b8f4944e51cc156dc0f2e52d15b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/8ad778e3865441b89a69a08b5ad7b499.png
[7653392b4f7914cf7a52a062ba9c07d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9ffa228bfb6e481ebc31321c96b6b959.png
[747bcb271ae0c66ee81361001849ab3c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/03f3f3cc5e784093ae41effc3fa59d56.png