React-Hooks的基本使用 （useState + useEffect +useRef）

Hooks?

• hook是React 16.8.0 增加的新特性/新语法。
• 可以在函数组件中使用state以及其他的React特性

常用的Hook 属性

• State Hook: React.useState()
• Effect Hook: React.useEffect()
• Ref Hook: React.useRef()

State Hook

• 组件可以有state状态，可以执行数据的读写操作
• 语法: const [xxx, setXxx] = React.useState(initValue)

// useState()说明
// loading为定义的变量
// setLoading 可对变量进行操作的行数
// false 则是变量的初始值。仅在初始化时loading=false，之后将不在调用

const [loading, setLoading] = useState(false);

//setLoading()写法1：直接指定新状态值覆盖原来的状态值。
//在回调函数中避免使用此方法，会造成数据不更新
setLoading(true)

//setLoading()写法2：参数为函数，接收原本的状态，在进行改值。
setLoading(value => value)

Effect Hook

• 用于模拟类组件中的生命周期钩子
• 可发ajax请求数据获取，设置订阅 / 启动定时器等
• 语法：useEffect()
• 可以把 useEffect Hook 看做如下三个函数的组合
  componentDidMount()
  componentDidUpdate()
  componentWillUnmount()

useEffect(() => {
    //根据useEffect的第二个参数判断，此处相当于调用componentDidMount()还是componentDidUpdate()
    //第二个参数：如果为空数组，则表示执行一次。
    //第二个参数：如果不传，则表示监听所有state值，如果发生改变则再次执行
    //第二个参数：如果传某一个变量，则表示监听该变量，如果该变量发生改变则再次执行
    return()=>{
		//此处相当于调用componentWillUnmount()
	}
  }, [])

Ref Hook

• Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
• 语法: const refContainer = useRef(initialValue)
• 作用:保存标签对象,功能与React.createRef()一样

const ref = useRef()

<Merchant ref={ref} ></Merchant>

//还可以结合useImperativeHandle forwardRef 使用，进行组件间通信

//父组件
const { form } = ref.current

//子组件
useImperativeHandle(ref, () => {
    return {
      form: formSearch
    }
  });
forwardRef(Merchant)