函数组件
import React from 'react';
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 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); }alertName = () => {const elem = this.nameInputRef.current;alert(elem.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
