函数组件

import React from 'react'; // class组件 class ListClass extends React.Component {         constructor(props) {             super(props);     }      render() {             const {     list } = this.props;         return (             
{    list.map(item => 
item.id}>{    item.name}
)}
         )     } }  // 函数组件 const ListFunc = (props) => {         const {     list } = props;     return (         
{    list.map(item => 
item.id}>{    item.name}
)}
     ) }  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 
             this.fileInputRef}/>             this.alertFile}>alert file         
     }      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实现不了
• 文件上传
• 某些富文本编辑器，需要传入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