React-组件-非受控组件 和 React-组件-高阶组件
原创
前言
image-20220504201203764
- 非受控组件也就是值，不受到 React 控制的表单元素就是非受控组件
废话不多说直接上代码：
import React from 'react';
class App extends React.PureComponent {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return (
<form onSubmit={(event) => {
this.submit(event)
}}>
<input type="text" ref={this.myRef}/>
<input type="submit"/>
</form>
)
}
submit(event) {
// 禁止默认行为
event.preventDefault();
console.log(this.myRef.current.value);
}
}
export default App;官方文档
高阶组件(Higher-Order Components，简称为 HOC)
- 参数为组件，返回值为新组件的函数就可以称之为高阶组件
import React from 'react';
class Home extends React.PureComponent {
render() {
return (
<div>Home</div>
)
}
}
function enhanceComponent(WrappedComponent) {
class AdvComponent extends React.PureComponent {
render() {
return (
<div>
<WrappedComponent/>
</div>
)
}
}
return AdvComponent;
}
const AdvComponent = enhanceComponent(Home);
class App extends React.PureComponent {
render() {
return (
<div>
<AdvComponent/>
</div>
)
}
}
export default App;官方文档
输入图片说明
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
