函数组件
import React from 'react';
// class组件
class ListClass extends React.Component {
constructor(props) {
super(props);
}
render() {
const {
list } = this.props;
return (
<ul>{
list.map(item => <li key={
item.id}>{
item.name}</li>)}</ul>
)
}
}
// 函数组件
const ListFunc = (props) => {
const {
list } = props;
return (
<ul>{
list.map(item => <li key={
item.id}>{
item.name}</li>)}</ul>
)
}
export {
ListClass,
ListFunc
}
函数组件
- 纯函数,输入props,输出JSX
- 没有实例,没有生命周期,没有state
- 不能扩展其他方法
非受控组件
- ref
- defaultValue defaultChecked
- 手动操作DOM元素
import React from 'react';
// class组件
class Test extends React.Component {
constructor(props) {
super(props);
this.fileInputRef = React.createRef();
this.nameInputRef = React.createRef();
}
render() {
return <div>
<input type="file" ref={
this.fileInputRef}/>
<button onClick={
this.alertFile}>alert file</button>
</div>
}
alertFile = () => {
const elem = this.fileInputRef.current;
alert(elem.value); // 不是this.fileInputRef.value
}
alertName = () => {
const elem = this.nameInputRef.current;
alert(elem.value); // 不是this.nameInputRef.value
}
}
export default Test;
非受控组件-使用场景
- 必须手动操作DOM元素,setState实现不了
- 文件上传
<input type=file>
- 某些富文本编辑器,需要传入DOM元素
如何选择
- 优先使用受控组件,符合React设计原则
- 必须操作DO,再使用受控组件
Portals
- 组件默认会按照既定层次嵌套渲染
- 如何让组件渲染到父组件以外?
import React from 'react'
import ReactDOM from 'react-dom'
import './style.css'
class App extends React.Component {
constructor(props) {
super(props)
this
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » React高级特性
发表评论 取消回复