react native Hooks 初体验

从官方文档中，我们可以得到以下的一些特性：

• 完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
• 100% 向后兼容的。 Hook 不包含任何破坏性改动。
• 现在可用。 Hook 已发布于 v16.8.0。
• 不能再 class 里面使用

没有计划从 React 中移除 class。 你可以在本页底部的章节读到更多关于 Hook 的渐进策略。

Hook 不会影响你对 React 概念的理解。 恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。

使用

import React, { useEffect } from 'react'
export default function Toast() {
const [count, setCount] = useState(0);
  useEffect(() => {
	 setCount(count + 1)
    return () => {
      console.log('useEffect');
      
    }
  })

  return <ToastModal count={count} />
}

调用

Toast()

报错

Hooks can only be called inside the body of a function component

原因

这个只是个函数，不是组件。
函数组件和函数还是有所区别的。前者会被React编译，最终执行的实质上是React编译后的函数；而后者在未执行时，React可能都不知道它是什么东西。

所以在使用时，必须按照React组件的方式去调用，所以在调用的时候需要这样写：

render() {
	return (
		<Toast />
	)
}

总结

所以在使用的时候hooks还是存在一些局限性的，文章会持续更新在使用中的实际问题