亲宝软件园·资讯

展开

React的三大属性

Darlingmi 人气:0

React三大属性

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。

原因:类组件会继承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

有状态组件和无状态组件

每个组件都有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'))

1. 修改state
2. 更新UI

setState

执行setState()的位置?

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 是组件对内的接口。

主要区别:

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'));

总结

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

加载全部内容

相关教程
猜你喜欢
用户评论