阅读量:0
函数组件
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