React —— 组件实例的三大核心属性 state，props，refs

﹏ヽ暗。殇╰゛Y 2022-11-07 14:47 151阅读 0赞

### React —— 组件实例的三大核心属性 state，props，refs ###

*  React —— 组件实例的三大核心属性 state，props，refs
 *   *  一、state
     *   *  state 介绍
         *  state 初始化
         *   *   *  1.借助类的构造器对state进行初始化
                 *  2.简写
         *  正确地使用 state
         *   *   *  1. 不要直接修改 State
                 *  2. State 的更新可能是异步的
                 *  3. State 的更新会被合并，而不是覆盖
         *  实例
     *  二、props
     *   *  props 介绍
         *  props 基本使用
         *   *   *  1.在组件中通过属性传入
                 *  2.利用扩展运算符的简写
                 *  3.在组件类定义中通过 this.props 读出
         *  props 限制
         *   *   *  1.引入prop-types
                 *  2.在类的外部进行限制
                 *  3.在类的内部进行限制
         *  函数式组件使用props
         *  实例
     *  三、refs
     *   *  refs 介绍
         *  创建 ref 的三种方式
         *   *   *  1.字符串形式的ref
                 *  2.回调函数形式的ref
                 *  3.createRef的使用
         *  总结
         *   *   *  1.勿过度使用 Refs
                 *  2.回调ref中回调执行次数的问题

# React —— 组件实例的三大核心属性 state，props，refs #

组件实例的三大核心属性: **state**，**props**，**refs**

## 一、state ##

### state 介绍 ###

### state 初始化 ###

##### 1.借助类的构造器对state进行初始化 #####

class Clock extends React.Component { 
      constructor(props) { 
        super(props);
        this.state = { date: new Date()};
      }
    
      render() { 
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is { this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }

##### 2.简写 #####

### 正确地使用 state ###

##### 1. 不要直接修改 State #####

**构造函数是唯一可以给 this.state 赋值的地方**

官网的原文是这样，但是在State的简写里可以对 state 进行初始化。

**错误的做法**

此代码不会重新渲染组件

// Wrong
    this.state.comment = 'Hello';

**正确的做法**

应该使用 setState()

// Correct
    this.setState({ comment: 'Hello'});

##### 2. State 的更新可能是异步的 #####

[参考React官网的解释][React].

##### 3. State 的更新会被合并，而不是覆盖 #####

这里的意思是说 对于 State 整体来说 ，更新是合并的；对于 State 中属性来说，更新是覆盖的。

### 实例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>state</title>
    </head>
    <body>
    	
    	<div id="test"></div>
    	
    	
    	<script type="text/javascript" src="../js/react.development.js"></script>
    	
    	<script type="text/javascript" src="../js/react-dom.development.js"></script>
    	
    	<script type="text/javascript" src="../js/babel.min.js"></script>
    
    	<script type="text/babel"> //1.创建组件 class Weather extends React.Component{ //构造器调用几次？ ———— 1次 constructor(props){ console.log('constructor'); super(props) //初始化状态 this.state = { isHot:false,wind:'微风'} //解决changeWeather中this指向问题 this.changeWeather = this.changeWeather.bind(this) } //render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数 render(){ console.log('render'); //读取状态 const { isHot,wind} = this.state return <h1 onClick={ this.changeWeather}>今天天气很{ isHot ? '炎热' : '凉爽'}，{ wind}</h1> } //changeWeather调用几次？ ———— 点几次调几次 changeWeather(){ //changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用 //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用 //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined console.log('changeWeather'); //获取原来的isHot值 const isHot = this.state.isHot //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。 this.setState({ isHot:!isHot}) console.log(this); //严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！ //this.state.isHot = !isHot //这是错误的写法 } } //2.渲染组件到页面 ReactDOM.render(<Weather/>,document.getElementById('test')) </script>
    </body>
    </html>

## 二、props ##

### props 介绍 ###

### props 基本使用 ###

##### 1.在组件中通过属性传入 #####

ReactDOM.render(<Person name="jerry" age={ 19}  sex="男"/>,document.getElementById('test1'))
    
    ReactDOM.render(<Person name="tom" age={ 18} sex="女"/>,document.getElementById('test2'))

##### 2.利用扩展运算符的简写 #####

const p = { name:'老刘',age:18,sex:'女'}
    		// console.log('@',...p);
    		// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
    ReactDOM.render(<Person { ...p}/>,document.getElementById('test3'))

##### 3.在组件类定义中通过 this.props 读出 #####

class Person extends React.Component{ 
    			render(){ 
    				// console.log(this);
    				const { name,age,sex} = this.props
    				return (
    					<ul>
    						<li>姓名：{ name}</li>
    						<li>性别：{ sex}</li>
    						<li>年龄：{ age+1}</li>
    					</ul>
    				)
    			}
    }

### props 限制 ###

属性 **propTypes** 和 **defaultProps**，需要特别注意大小写！

##### 1.引入prop-types #####

<script type="text/javascript" src="../js/prop-types.js"></script>

##### 2.在类的外部进行限制 #####

向类添加属性 propTypes 和 defaultProps

##### 3.在类的内部进行限制 #####

在类定义中通过 **静态变量** 设置 propTypes 和 defaultProps

### 函数式组件使用props ###

函数式组件可以通过 **传递参数** 的形式，传入 props。

但是由于无法在函数内部定义 props 限制和默认值，只能在外部进行定义。

### 实例 ###

## 三、refs ##

### refs 介绍 ###

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素。对于这两种情况，React 都提供了解决办法。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70]

当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。

const node = this.myRef.current;

### 创建 ref 的三种方式 ###

##### 1.字符串形式的ref #####

写法最简单，但是React官方不推荐。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 1]

##### 2.回调函数形式的ref #####

这个回调函数中接受 React 组件实例或 HTML DOM 元素作为参数，以使它们能在其他地方被存储和访问。

<input ref={ c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>

参数c为 HTML DOM 元素即 input 元素，将其添加到组件自身的属性中。

##### 3.createRef的使用 #####

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的

### 总结 ###

##### 1.勿过度使用 Refs #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 2]

##### 2.回调ref中回调执行次数的问题 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 3]

class CustomTextInput extends React.Component { 
      constructor(props) { 
        super(props);
    
        this.textInput = null;
    
        this.setTextInputRef = element => { 
          this.textInput = element;
        };
    
        this.focusTextInput = () => { 
          // 使用原生 DOM API 使 text 输入框获得焦点
          if (this.textInput) this.textInput.focus();
        };
      }
    
      componentDidMount() { 
        // 组件挂载后，让文本框自动获得焦点
        this.focusTextInput();
      }
    
      render() { 
        // 使用 `ref` 的回调函数将 text 输入框 DOM 节点的引用存储到 React
        // 实例上（比如 this.textInput）
        return (
          <div>
            <input
              type="text"
              ref={ this.setTextInputRef}
            />
            <input
              type="button"
              value="Focus the text input"
              onClick={ this.focusTextInput}
            />
          </div>
        );
      }
    }

[React]: https://react.docschina.org/docs/state-and-lifecycle.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70]: /images/20221023/56e9d2373df844ac9d03684261208a56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 1]: /images/20221023/b0f3b29b2a0f4fdebd789706f2b21e4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 2]: /images/20221023/bf716404703742ae958ffa143feb1115.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 3]: /images/20221023/e14abb8b9bb14992afbba27fc0d30f22.png