React的三大属性你都知道吗

目录
  • React三大属性
    • props
      • 函数组件
      • 类组件
    • state
      • 有状态组件和无状态组件
      • setState
    • props和state属性的区别
    • refs
      • React.createRef
      • ref的绑定
  • 总结

React三大属性

props

  • 组件是封闭的,接收外部数据应该通过props来实现
  • 函数组件通过参数props来接收数据,props是一个对象; 类组件通过this.props接收数据。
  • 传递数据:在组件标签上添加属性

函数组件

const Hello = (props) => {
    console.log(props);
    return (
        <div>props:{props.name}</div>
    )
}
ReactDOM.render(<Hello name="mimi" />, document.getElementById('root'))

类组件

class App extends React.Component {
    render() {
        console.log(this.props);
        return (
            <div>
                props: {this.props.name}
            </div>
        )
    }
}
ReactDOM.render(<App name="mimi" />, document.getElementById('root'))

在继承类的构造函数中必须调用super函数,super代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次super函数,否则会报错。但是super函数内的this指向的是当前类的实例。

构造器是否接受 props,是否传递给 super,取决于是否希望在构造器中通过 this访问props。

  • 当构造器中接收了props参数,super没有传递props,此时this.propsundefined,当然可以正常使用props(前边不加this)
  • 当构造器中接收了props参数,super也传递props,可以通过this.props拿到对象。

原因:类组件会继承React.Component,而Component的源码是:

function Component(props, context, updater) {
  this.props = props;      //绑定props
  this.context = context;  //绑定context
  this.refs = emptyObject; //绑定ref
  this.updater = updater || ReactNoopUpdateQueue; //上面所属的updater 对象
}

当我们在类组件中调用super,实际上是在执行父类的构造函数,如果没有将props传入super函数,那么在子类的构造函数中,this.props是undefined。

为什么仍然可以在 render和其他方法中访问 this.props。因为React 会在构造函数被调用之后,会把 props 赋值给刚刚创建的实例对象。

state

有状态组件和无状态组件

  • 函数组件又叫做无状态组件,函数组件没有自己的状态,只负责数据的静态展示。
  • 类组件又叫做有状态组件,类组件有自己的状态,负责更新UI,让页面动起来。
  • 状态(state)就是数据,是组件内部的私有数据,只能在组件内部使用。

每个组件都有state,它的值是对象类型;组件state属性的初始化放在构造方法中。

class App extends React.Component {
    constructor() {
        super();
        // 初始化state
        this.state = {
            count: 0
        }
    }
    render() {
        return (
            <div>计数器:{this.state.count}</div>
        )
    }
}
ReactDOM.render(<App2 />, document.getElementById('root'))
  • 状态是可变的:this.setState({要修改的数据})
  • 注意不要直接通过this.state.x = y 修改state中的数据,这是错误的写法.
  • etState的作用:

1. 修改state
2. 更新UI

setState

执行setState()的位置?

  • 在react控制的回调函数中: (异步)

    • 生命周期勾子 ,react事件监听回调(合成事件)
  • 非react控制的异步回调函数中: (同步)
  • 定时器回调 ,原生事件监听回调 , promise回调

setState是异步还是同步?

setState的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的。只是在 React 的 setState 函数实现中,会根据 isBatchingUpdates(默认是 false) 变量判断是否直接更新 this.state 还是放到队列中稍后更新。然后有一个 batchedUpdate 函数,可以修改 isBatchingUpdates 为 true,当 React 调用事件处理函数之前,或者生命周期函数之前就会调用 batchedUpdate 函数,这样的话,setState 就不会同步更新 this.state,而是放到更新队列里面后续更新。

这样你就可以理解为什么原生事件和 setTimeout/setinterval 里面调用 this.state 会同步更新了,因为通过这些函数调用的 React 没办法去调用 batchedUpdate 函数将 isBatchingUpdates 设置为 true,那么这个时候 setState 的时候默认就是 false,那么就会同步更新。

props和state属性的区别

props 是组件对外的接口,state 是组件对内的接口。

主要区别:

  • State是可变的,是一组用于反映组件UI变化的状态集合。
  • 而Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。

refs

refs是弹性文件系统,在React中可以获取React元素或DOM元素。

我们在日常写React代码的时候,一般情况是用不到Refs这个东西,因为我们并不直接操作底层DOM元素,而是在render函数里去编写我们的页面结构,由React来组织DOM元素的更新。凡事总有例外,总会有一些很奇葩的时候我们需要直接去操作页面的真实DOM,这就要求我们有直接访问真实DOM的能力,而Refs就是为我们提供了这样的能力。

React.createRef

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

class App extends React.Component {
  inputRef = React.createRef();
  showData = () => {
    let input = this.inputRef.current;
    console.log(input.value)
  }
  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.showData}>提示</button>
      </div>
    )
  }
}

ref的绑定

class Person extends React.Component{
    constructor(){
        super();
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        // 使用原生的 DOM API 获取焦点
        this.refs.myInput.focus();
    }
    render(){
        return (
            <div>
                <input type="text" ref="myInput" />
                <input
                    type="button"
                    value="点我输入框获取焦点"
                    onClick={this.handleClick}/>
            </div>
        );
    }
}
ReactDOM.render(<Person />, document.getElementById('root'));
  • 当 ref 属性用于 HTML 元素时,使用 React.createRef()或者React.useRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
  • 当 ref 属性用于 class 组件时,ref 对象接收组件的挂载实例作为其 current 属性。
  • 你不能在函数组件上使用 ref 属性,因为他们没有实例。函数组件可以使用useRef(),它所返回的对象在组件的整个生命周期内不变。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • 如何深入理解React的ref 属性

    概述 首先,Refs 和 ref 是两个概念,Refs 是 React 提供的可用特定 API 创建的一个对象.该对象的结构如下: 这个对象只有一个属性就是 current ,那么这个对象是用来干嘛的呢? Refs 允许我们访问 DOM 节点或在 render 方法中创建的 React 元素.(DOM节点就是指原生DOM元素,在render()方法中创建的 React 元素就是指 React 的类组件元素) 我们可以想象这样一个需求,两个兄弟元素,一个是 div ,一个是 button.现在想实

  • 深入理解React 三大核心属性

    目录 1.State属性 2.Props 属性 3.Refs 属性 (1)字符串形式 (2)函数回调形式 (3)createRef创建ref容器 1.State 属性 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致. React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). import React from 'react '; import Reac

  • React三大属性之props的使用详解

    上期讲了state,接下来讲讲props.props功能在于组件间通信(父子组件),首先说说在各种组件中的用法: 类组件 //父组件传值 class Father extends React.PureComponent{ render(){ return ( <Son value={"son"} /> ) } } class Son extends React.PureComponent{ render(){ return ( <div>this data is

  • React三大属性之Refs的使用详解

    refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候,用来获取节点的方法.在React官方的解释中,它的适用范围如下: 管理焦点,文本选择或媒体播放. 触发强制动画. 集成第三方 DOM 库. React文档中再三强调,请不要过度使用refs,所以当我们可以用dom原生对象解决时,尽量不要使用refs 依照之前的写法,首先是给出类组件和函数组件中refs的写法 类组件 在类中,refs有三种方式,目前最常用的是回调的形式使用,分别进行演示 //直接定义refs,已废弃

  • React 三大属性之state的使用详解

    React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了.state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染.这里分别介绍一下在类和函数组件中state的写法: 类组件 class ClassComponent extends React.Component{ constructor(props){ super(props) } //可写可不写 r

  • React的三大属性你都知道吗

    目录 React三大属性 props 函数组件 类组件 state 有状态组件和无状态组件 setState props和state属性的区别 refs React.createRef ref的绑定 总结 React三大属性 props 组件是封闭的,接收外部数据应该通过props来实现 函数组件通过参数props来接收数据,props是一个对象: 类组件通过this.props接收数据. 传递数据:在组件标签上添加属性 函数组件 const Hello = (props) => { conso

  • React组件三大属性之state,props,refs

    目录 1.1基本理解和使用 1.1.1 使用React开发者工具调试 1.1.2 定义组件的方式 1.1.3 注意 1.1.4 渲染类组件标签的基本流程 1.2 组件实例的三大核心属性之一:state 1.2.1 理解 1.2.2 案例 1.2.3 在类式组件使用state 1.2.4 在类式组件使用state的简写方式 1.2.3 强烈注意 1.3 组件实例的三大核心属性之一:props 1.3.1 理解 1.3.3 作用 1.3.4 在类式组件使用props 1.3.5 在函数式组件使用pr

  • React组件实例三大属性state props refs使用详解

    目录 一. State 1.概念 2.State的简单用法 3. JS绑定事件 4.react 绑定事件 5.react this指向问题 6.修改state值 7.代码简写 二.props 1.概念 2.传参的基础方法.运算符传参 三.refs 定义 字符串形式的ref.回调函数下ref.createRef 创建ref容器 一. State 1.概念 概念:state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合),组件被称为状态机,通过更新组件的state来更新对应的

  • React state状态属性详细讲解

    目录 1. 基本使用 2. 使用setState操作state数据 3. 案例-toDoList 4. 案例-购物车 1. 基本使用 要点: 成员属性 state 它是一个特殊的属性,它是当前类的私有数据,只有在当前的组件中才能操作里面的数据 状态( state )即数据,是组件内部的私有数据,只能在组件内部使用,和vue中data差不多,不过它没有像vue中的data进行了数据劫持 state的值是对象,表示一个组件中可以有多个数据 通过this.state来获取状态,react 中没有做数据

  • React state状态属性用法讲解

    目录 类组件中的state setState的用法 类组件如何限制state更新视图 setState原理揭秘 函数组件中的state useState的用法 如何监听state的变化 setState(dispatch)更新特点 useState的注意事项 总结 相同点 不同点 类组件中的state setState的用法 React项目中UI改变来源于state的改变,类组件中setState是更新组件,渲染视图的主要方式 基本用法 setState(obj,callback) 第一个参数:

  • React中的Refs属性你来了解吗

    目录 1介绍 2使用方法 2.1createRef(版本>=React16.3) 2.2回调Refs 2.3String类型的Refs(已过时,不推荐使用) 2.4useRef(ReactHooks) 总结 1 介绍 react组件的三大属性: 1.props属性:封装传递给组件的参数 2.state属性:组件的状态,当值发生改变后,重新渲染组件 3.refs属性: (1)通过该属性可以去访问DOM元素或render函数中的react元素(虚拟的DOM元素) ——DOM元素或render函数中的

随机推荐