缘起

自从19年11月份起项目引入ReactNative 技术之后，就一直在不断学习中；从 ES5 到 ES6 从js 到 ts、从class 到 React Hooks.....一路上都在感叹前端技术更新迭代如此之快。本文主要整理对 React Hooks 在 RN 中使用的感受和个人理解，因为自己是移动端开发，对于前端技术知识很有限，所以本文只是记录自己学习React Hooks过程的一些理解和认知；本来也是适合像我这种没有前端基础的却要使用 React Hooks 技术来开发的人看看，大神们勿喷；若有理解错误或者是理解深度不够的欢迎提出来; 整个成长过程特别感谢我司各前端大神的帮助。

学习过程中在想一个新的技术或者编程范式的出现到底是为了解决什么问题？它能带来什么？原来的方式有什么问题？于是我找到了以下内容：

2019年React Hooks是React生态圈里边最火的新特性了。它改变了原始的React类的开发方式，改用了函数形式;它改变了复杂的状态操作形式，让程序员用起来更轻松;它改变了一个状态组件的复用性，让组件的复用性大大增加。

简单的理解就是：要去 class 化。

React Hooks 是什么？

简介

需要先了解什么是 React

React 是一个用于构建用户界面的 JavaScript 库。你可以在首页或教程中学习什么是 React

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

React Native 从 0.59 版本开始支持 Hook
学习途径

官方文档

个人觉得最好的学习途径就是直接通过官方文档，先把官方 Demo 撸一遍，搞清楚每行代码的是做了什么，本质是什么，遇到问题请教别人的时候才知道别人说的是什么；勿做伸手党～

官方 Demo 代码

官方 Demo 很简单，功能就是一个页面上有个按钮点击后计数器+1，有个 <Text> 组件展示了计数器最后的值。

class 部分代码不做说明，比较简单；主要对Hook 版本的代码做一下分析;

代码中使用 function 来声明一个Example() 函数来代替原来的 class;

 import React, { useState } from 'react';

 function Example() {
   // 声明一个叫 "count" 的 state 变量  
   const [count, setCount] = useState(0);
   return (
     <div>
       <p>You clicked {count} times</p>
       <button onClick={() => setCount(count + 1)}>
         Click me
       </button>
     </div>
   );
 }

useState

useState是react自带的一个hook函数，它的作用是用来声明状态变量

 const [count, setCount] = useState(0);

使用 useState 来记录状态; 查看文档，useState() 函数返回值是一个数组，以下代码实际上是使用了ES6的数组结构的写法；

let _useState = userState(0)
let count = _useState[0]
let setCount = _useState[1]

useState这个函数接收的参数是状态的初始值(Initial state)，它返回一个数组，这个数组的第0位是当前的状态值，第1位是可以改变状态值的方法函数。所以上面的代码的意思就是声明了一个状态变量为count，并把它的初始值设为0，同时提供了一个可以改变count的状态值的方法函数

useEffect

Effect Hook 可以让你在函数组件中执行副作用操作

可以使用useEffect来代替原来class 中的生命周期，执行上面代码，发现控制台打印了一次，为0次；当再次点击按钮时，输出了对应的次数；

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {    document.title = `You clicked ${count} times`;  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

首先，声明了一个状态变量count, 将它的初始值设为0，然后告诉react，我们的这个组件有一个副作用。给useEffect Hook传了一个匿名函数，这个匿名函数就是我们的副作用。在这里我们打印了一句话,当React要渲染组件时，它会记住用到的副作用，然后执行一次。等Reat更新了State状态时，它再一词执行定义的副作用函数。

useEffect 注意事项

首次渲染和之后的每次渲染都会调用一遍useEffect函数，class中要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)；
useEffect 会在每次渲染后都会执行
useEffect中定义的函数是异步执行的，而componentDidMonut和componentDidUpdate中的代码都是同步执行的；
测量布局有单独的 useLayoutEffect Hook 可使用

useEffect 解绑副作用

使用返回一个函数的形式进行解绑

useEffect(() => {
 function handleStatusChange(status) {
   setIsOnline(status.isOnline);
 }

 ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

 return () => {
   ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
 };
});

`useEffect`的第二个参数

它是一个数组，数组中可以写入很多状态对应的变量，意思是当状态值发生变化时，才执行里面的代码；但是当传空数组[]时，组件将被销毁时才进行解绑。

useEffect(()=>{
    console.log('useEffect====')
    return ()=>{
        console.log('useEffect====解绑副作用')
    }
},[])

未完。。。

RN中使用React Hooks 感受

缘起