React Native中ref的用法(通过组件的ref属性,来获取真实的组件)
ref是什么?
ref是组件的特殊属性,组件被渲染后,指向组件的一个引用。可以通过组件的ref属性,来获取真实的组件。因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,
称为虚拟的DOM,只有当它真正的插入文档之后,才变为真正的DOM节点。根据React的设计,所以的DOM变动都发生在虚拟DOM上,然后再将实际的部分反映到真实的DOM上--这就是 DOM DIff,它可以提高页面性能。 如何使用ref呢? ref属性的定义是在使用组件的部分,而组件的方法之类的都是在定义组件的里面就有的。render方法被调用的时候,组件就会被渲染。渲染完成之后,就可以获取这个组件实例啦,因而就可以调用组件实例里的方法或者变量啦。
React的ref有3种用法:
1. 字符串(已废弃)
2. 回调函数
3. React.createRef() (React16.3提供)
1. 字符串
最早的ref用法。
1.dom节点上使用,通过this.refs[refName]来引用真实的dom节点
<input ref="inputRef" /> //this.refs['inputRef']来访问
2.类组件上使用,通过this.refs[refName]来引用组件的实例
<CustomInput ref="comRef" /> //this.refs['comRef']来访问
2. 回调函数
回调函数就是在dom节点或组件上挂载函数,函数的入参是dom节点或组件实例,达到的效果与字符串形式是一样的,
都是获取其引用。
回调函数的触发时机:。
1. 组件渲染后,即componentDidMount后
2. 组件卸载后,即componentWillMount后,此时,入参为null
3. ref改变后
1.dom节点上使用回调函数
<input ref={(input) => {this.textInput = input;}} type="text" />
2.类组件上使用使用回调函数
<CustomInput ref={(input) => {this.textInput = input;}} />
3.可用通过props跨级传递的方式来获取子孙级dom节点或组件实例
下面是在跨两级获取到孙级别的组件内部的dom节点
function CustomTextInput(props) {
return (
<div>
<input ref={props.inputRef} />
</div>
);
}
function Parent(props) {
return (
<div>
My input: <CustomTextInput inputRef={props.inputRef} />
</div>
);
}
class Grandparent extends React.Component {
render() {
return (
<Parent
inputRef={el => this.inputElement = el}
\/>
);
}
}
3.React.createRef()
在React 16.3版本后,使用此方法来创建ref。将其赋值给一个变量,通过ref挂载在dom节点或组件上,该ref的current属性
将能拿到dom节点或组件的实例
例如
class Child extends React.Component{
constructor(props){
super(props);
this.myRef=React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <input ref={this.myRef}/>
}
}
4.React.forwardRef
同样是React 16.3版本后提供的,可以用来创建子组件,以传递ref。
例如:
//子组件(通过forwardRef方法创建)
const Child=React.forwardRef((props,ref)=>(
<input ref={ref} />
)); //父组件
class Father extends React.Component{
constructor(props){
super(props);
this.myRef=React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <Child ref={this.myRef}/>
}
}
子组件通过React.forwardRef来创建,可以将ref传递到内部的节点或组件,进而实现跨层级的引用。
forwardRef在高阶组件中可以获取到原始组件的实例
例如:
//生成高阶组件
const logProps=logProps(Child); //调用高阶组件
class Father extends React.Component{
constructor(props){
super(props);
this.myRef=React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <LogProps ref={this.myRef}/>
}
} //HOC
function logProps(Component) {
class LogProps extends React.Component {
componentDidUpdate(prevProps) {
console.log('old props:', prevProps);
console.log('new props:', this.props);
} render() {
const {forwardedRef, ...rest} = this.props; // Assign the custom prop "forwardedRef" as a ref
return <Component ref={forwardedRef} {...rest} />;
}
} // Note the second param "ref" provided by React.forwardRef.
// We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
// And it can then be attached to the Component.
return React.forwardRef((props, ref) => {
return <LogProps {...props} forwardedRef={ref} />;
});
}
//生成高阶组件
const logProps=logProps(Child); //调用高阶组件
class Father extends React.Component{
constructor(props){
super(props);
this.myRef=React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <LogProps ref={this.myRef}/>
}
} //HOC
function logProps(Component) {
class LogProps extends React.Component {
componentDidUpdate(prevProps) {
console.log('old props:', prevProps);
console.log('new props:', this.props);
} render() {
const {forwardedRef, ...rest} = this.props; // Assign the custom prop "forwardedRef" as a ref
return <Component ref={forwardedRef} {...rest} />;
}
} // Note the second param "ref" provided by React.forwardRef.
// We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
// And it can then be attached to the Component.
return React.forwardRef((props, ref) => {
return <LogProps {...props} forwardedRef={ref} />;
});
}
注意:
1. ref在函数式组件上不可使用,函数式组件无实例,但是其内部的dom节点和类组件可以使用
2. 可以通过ReactDOM.findDOMNode(),入参是一个组件或dom节点,返回值的组件对应的dom根节点或dom节点本身
通过refs获取到组件实例后,可以通过此方法来获取其对应的dom节点
3. React的render函数返回的是vDom(虚拟dom)
参考:https://blog.csdn.net/liangklfang/article/details/72858295
https://blog.csdn.net/liwusen/article/details/80009968
最新文章
- Python的单元测试(一)
- EntityFramework 实体拆分和表拆分
- 史上最全的ASP.NET MVC路由配置
- 20161117__安装Qt5.3.2
- iOS开发 -- 为本地文件添加自定义属性的工具类
- NDK开发
- 阿里云centos增加swap(虚拟内存)
- 学习练习 session练习
- linux系统识别和挂载文件系统
- (剑指Offer)面试题29:数组中出现次数超过一半的数字
- 【applicationContext.xml】配置文件找不到
- POJ 1472 Coins (多重背包+滚动数组)
- 【转】Qt事件循环与线程 二
- URLDecoder: Incomplete trailing escape (%) pattern
- 网页单位和rem小分享
- 值得 .NET 开发者了解的15个特性
- 使用清华开源镜像安装tensorflow
- Odoo 开源微信小程序商城模块
- C - BLG POJ - 1417 种类并查集加dp(背包)
- Fragment 生命周期的详情