共计 1186 个字符,预计需要花费 3 分钟才能阅读完成。
面试官:说说对受控组件和非受控组件的了解?利用场景?
一、受控组件
受控组件,简略来讲,就是受咱们管制的组件,组件的状态全程响应内部数据
举个简略的例子:
class TestComponent extends React.Component {constructor (props) {super(props);
this.state = {username: 'lindaidai'};
}
render () {return <input name="username" value={this.state.username} />
}
}
这时候当咱们在输入框输出内容的时候,会发现输出的内容并无奈显示进去,也就是 input
标签是一个可读的状态
这是因为 value
被this.state.username
所管制住。当用户输出新的内容时,this.state.username
并不会自动更新,这样的话 input
内的内容也就不会变了
如果想要解除被管制,能够为 input
标签设置 onChange
事件,输出的时候触发事件函数,在函数外部实现 state
的更新,从而导致 input
框的内容页发现扭转
因而,受控组件咱们个别须要初始状态和一个状态更新事件函数
二、非受控组件
非受控组件,简略来讲,就是不受咱们管制的组件
个别状况是在初始化的时候承受内部数据,而后本人在外部存储其本身状态
当须要时,能够应用 ref
查问 DOM
并查找其以后值,如下:
import React, {Component} from 'react';
export class UnControll extends Component {constructor (props) {super(props);
this.inputRef = React.createRef();}
handleSubmit = (e) => {console.log('咱们能够取得 input 内的值为', this.inputRef.current.value);
e.preventDefault();}
render () {
return (<form onSubmit={e => this.handleSubmit(e)}>
<input defaultValue="lindaidai" ref={this.inputRef} />
<input type="submit" value="提交" />
</form>
)
}
}
对于 refs
的详情应用能够参考之前文章
三、利用场景
大部分时候举荐应用受控组件来实现表单,因为在受控组件中,表单数据由 React
组件负责解决
如果抉择非受控组件的话,控制能力较弱,表单数据就由 DOM
自身解决,但更加方便快捷,代码量少
针对两者的区别,其利用场景如下图所示:
参考文献
- http://meloguo.com/2018/10/08/ 受控与非受控组件 /
- https://zhuanlan.zhihu.com/p/37579677
正文完