React.forwardRef(不常用.可以通过props传递)

函数组件不可以添加ref属性

作用: 将函数组件内部的元素,交给父组件使用

// 实现: 
// App组件
const ref = React.createRef()
class App extends React.Component {
  componentDidMount() {
    // 在app组件中,通过ref获取到了button的Dom对象
    console.log(ref.current)
  }
  render() {
    return (
      <div>
        // 使用React.forwardRef包装后的FancyButton就可以添加ref属性了
        <FancyButton ref={ref}>Click me!</FancyButton>
      </div>
    )
  }
}
// FancyButton
const FancyButton = React.forwardRef((props, ref) => {
  console.log(props, ref)
  return (
    <button ref={ref} className='FancyButton'>
      {props.children}
    </button>
  )
})

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Portal

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App组件</h1>
		// 在app组件中使用了portal组件
		// 但是渲染dom的时候,portal的内容不在这个div中
        <Portal></Portal>
      </div>
    )
  }
}

export default class Portal extends Component {
  constructor() {
    super()
    this.container = document.createElement('div')
  }
  componentDidMount() {
    document.body.appendChild(this.container)
  }
  render() {
      
    let node = (
      <div>
        <div className='modal'>模态框</div>
        <button>按钮</button>
      </div>
    )
    // 当前portal组件不直接返回元素,而是返回一个portal
    // react底层会将node的内容,渲染到this.container中
    return ReactDOM.createPortal(node, this.container)
  }

  componentWillUnmount() {
    document.body.removeChild(this.container)
  }
}

高阶组件(HOC HigherOrderComponent)

• **高阶组件的作用: ** 提供复用的状态逻辑
• 高阶组件是什么: 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式
  • 简单理解的话: 一个拥有复用逻辑的函数,这个函数需要传入一个组件,然后返回一个增强的组件

const EnhancedComponent = higherOrderComponent(WrappedComponent);

• 高阶组件实现

  1. 调用函数,得到增强组件,渲染增强组件

  const EnhancedComponent = higherOrderComponent(WrappedComponent);
  // 注意: 
  1. 函数名一般以with开头,使用小驼峰命名法
  2. 函数中形参要采用大驼峰命名法(因为这个参数接收的是一个组件)
  3. 返回的也是一个组件,所以也要使用大驼峰命名法

• 高阶组件要注意的问题:

  1. 配合chrome调试工具显示组件名的问题

     

  **解决: **

  给高阶组件中返回的组件, 增加一个静态属性displayName

  static displayName = `XXX(${WrappedComponent.displayName ||WrappedComponent.name ||'Component'})`
  
  //原理: 调试工具,优先展示组件的displayName

  2. 传递props的问题