React高级特性

函数组件

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