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.props
是undefined
,当然可以正常使用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 赋值给刚刚创建的实例对象。
函数组件又叫做无状态组件,函数组件没有自己的状态,只负责数据的静态展示。
类组件又叫做有状态组件,类组件有自己的状态,负责更新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()的位置?
在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 是组件对内的接口。
主要区别:
State是可变的,是一组用于反映组件UI变化的状态集合。
而Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。
refsrefs是弹性文件系统,在React中可以获取React元素或DOM元素。
我们在日常写React代码的时候,一般情况是用不到Refs这个东西,因为我们并不直接操作底层DOM元素,而是在render函数里去编写我们的页面结构,由React来组织DOM元素的更新。凡事总有例外,总会有一些很奇葩的时候我们需要直接去操作页面的真实DOM,这就要求我们有直接访问真实DOM的能力,而Refs就是为我们提供了这样的能力。
React.createRefReact.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(),它所返回的对象在组件的整个生命周期内不变。
总结本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注易知道(ezd.cc)的更多内容!