小白入门：编写一个炒鸡简单的react函数组件

如题所示，接下来会带你编写一个很简单的react函数组件，首先这是一个很常用的modal弹窗组件alert,其次包含了hook，组件调用和js调用等知识，适合小白入门

hook需要了解

本文要做的是一个Alert弹窗，可以通过组件调用或者js调用来显示，然后通过点击确定按钮关闭，看起来十分简单，但首先第一步，我们需要了解hook，但本文不会讲解hook，还没看过hook的可以去官网看一下。

这里用到useState,useEffect来控制Alert弹窗的显示隐藏。简单来说就是：通过useState初始化变量(如visible)，同时会返回一个设置state的函数(如setVisible)，接着在useEffect里面监听props的变化来动态修改变量visible。说的有点模糊，具体看代码说话：

import React, { useState, useEffect } from 'react'
import * as ReactDOM from 'react-dom'
import './index.less' // 样式不贴出来了

function Alert(props) {
  // 通过useState初始化控制变量
  const [ visible, setVisible ] = useState(props.visible)
  
  // 当外部的props.visible发生变化时，修改visible的值
  useEffect(() => {
    setVisible(props.visible);
  }, [props.visible]);

  // 回调函数
  function handleConfirm(){
    setVisible(false)
    props.onConfirm&&props.onConfirm(false)
  }
  // title,message的值通过外部控制
  return (
    <React.Fragment>
      {visible && (
      <div className="alert-component">
        <div className="component-mark"></div>
        <div className="alert-container">
          <h3 className="alert-title">{props.title}</h3>
          <div className="alert-content">{props.message}</div>
          <div className="alert-btns">
            <button className="alert-confirm" onClick={handleConfirm}>{props.confirmText||'确定'}</button>
          </div>
        </div>
      </div>
      )}
    </React.Fragment>
  );
}

export default Alert

到这一步，就完成了一个简单的函数组件，但是现在的它只能通过组件来调用，接下来改造一下，让它可以通过js的方式调用。

思路：在Alert函数，定义一个show的属性方法，通过它来调用；在show里面，通过ReactDOM来渲染Alert函数本身，再定义一个close方法来移除Alert。说的不是很清楚，具体看代码说话：

Alert.show = function (title,message,cb) {
  const div = document.createElement('div')
  document.body.appendChild(div)

  ReactDOM.render(<Alert visible={true} title={title} message={message} onConfirm={close}/>, div)
    
  // 关闭的时候移除对应的DOM节点
  function close(){
    ReactDOM.unmountComponentAtNode(div)
    if (div && div.parentNode) {
      div.parentNode.removeChild(div) 
    }
    cb&&cb() //关闭弹窗的回调函数
  }
  // 这里返回close，可以在外面手动控制关闭，但是这个组件不太需要在外面手动关闭，不返回也可以
  return close
};

调用

首先是组件调用：

const [showAlert,setShowAlert] = useState(false)
...
<Alert 
  visible={showAlert} 
  title="温馨提示" 
  message={<p>娃哈哈</p>}
  onConfirm={()=>setShowAlert(false)}
 />

接着是js调用：

<button onClick={()=>{
    const closeCb = Alert.show('温馨提示','娃哈哈')
    setTimeout(closeCb,20*1000) // 延迟20秒自动关闭
}}>js点击打开关闭</button>

总结

到这里就完了，是不是炒鸡简单，你学会了没有