RN快速上手-hooks | 纳兰寒明的博客

[TOC]

前言

先说说客户端以后的发展吧！

无非以下几个选择：

接着在客户端卷，从客户端卷到前端，做到整体大前端。
做终端底层，类似车载，学习机，路由器，穿戴设备，系统framework层等
去后端卷吧，java也有一席之地。业务的后端和算法，大数据，AI的差点还是挺大的，而且后三的门槛比较高，歧视链严重。

直接上结论，如果还要继续做客户端的话，客户端掌握RN已经是必然，建议客户端同学都学习参与进来。

当前形势下，客户端百花齐放，前有安卓，苹果，后有华为。（主要还是华为的冲击比较大）公司如果还要在客户端发力，必然需要支持这三端开发，但是安卓使用java，kotlin，苹果使用swift，objectC，鸿蒙使用arkts。如果再加上RN，那就是4种。这4种技术栈如果需要3-4组人开发，那成本可想而知。在很久以前，众大厂都觉得双端人力成本过高，使用跨端技术RN,flutter减少开发人力成本。如果在加上鸿蒙系统的话，三端开发，更加促进了跨端技术的发展，会有更多的公司考虑引入跨端技术进行改进。

以我们公司来说，在android，iOS，hmos，rn中最少掌握2种，最好掌握三种技术栈

回归内容，如果客户端同学需要掌握RN技术，如何快速上手呢

开发差异

RN使用的是ts，js进行开发，使用React组件，其中比较出名的是redux数据流处理思想。

hmos使用的是arkts进行开发，可以理解他是更轻的ts语言，其中很多特性都删除了。

android使用的是kotlin，java进行开发。

其中可以看到，RN和hmos都是ts语言，android是kotlin，java语言。java和kotlin语言是面向对象的语言，new一个class走天下。ts虽然说是面向对象的js语言，但是ts的官方却在建议不要使用其面向对象的特性，那么对于我们来说，为了写的优雅，ts可以立即为和js一样都是面向编程的语言（函数式编程）

对于android出身的人来说，天塌了，不是万物皆是对象吗？犹豫不决new对象，怎么在RN中不允许new了。这其实需要客户端出身的人进行转变，RN说到底使用的是react前端技术栈，快速迭代，简单堆叠是前端的本性。

如何上手？

React Native 中文网一定是圣经，但是还是建议看一下React相关的，不懂React直接上手RN还是有一定难度的。

但是看这些确实需要很多时间，所以最好的学习方式其实是你上手一个小页面，在一知半解，各种不适应中进行开发迭代，看着前辈的代码照葫芦画瓢，他为什么这么写？这个关键词是什么意思？为什么要这么用？实践出真知！

如果你没时间看如上文档，那么在上手前还是建议你一定要踏实的先看下这篇文章。看完可以直接开发了。

轻松学会 React 钩子：以 useEffect() 为例

如何理解RN技术栈-hooks

RN提供了两种组件模式：类组件、函数组件

对于类组件来说，对于android很好理解，快速上手没啥问题，但是

官方推荐函数组件，那么我们需要提供的组件都是一个函数，那么页面的逻辑和数据处理应该放在哪里？

函数组件的相关逻辑都放在hooks(勾子)中，可以说hooks是RN组件开发的精髓，懂了他，RN开发就没啥大问题了。

hooks会存在一些规范：

不要在条件语句内或循环语句内调用 Hook。
不要在包含 return 的条件语句之后调用 Hook。
不要在事件监听中调用 Hook。
不要在类式组件内调用 Hook。
不要在那些传给 useMemo，useReducer 或 useEffect 的函数内调用 Hook。

常用hooks： React内置Hook

useEffect：通用的函数组件勾子。如果监听属性不设置，则加载完成后会回调一次，如果设置数据变化，才会牵动勾子执行，最常用的是进行网络请求

useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );

      setData(result.data);
    };

    fetchData();
  }, []);

useLayoutEffect:在浏览器重新绘制屏幕前执行，可以在此处测量布局
1

useState:向组件添加一个状态变量

1	const [state, setState] = useState(initialState)

useReducer：引入redux组件reducer功能

Redux：(state, action) => newState 收到action后通过reducer算出新的状态值，进行ui更新
1
const [state, dispatch] = useReducer(reducer, initialArg, init?)
useContext：子使用父组件的属性，子公用，父存储
1
const value = useContext(SomeContext)
useRef:存储非影响渲染的变量数据
1
const ref = useRef(initialValue)
useMemo:它在每次重新渲染的时候能够缓存计算的结果
1
const cachedValue = useMemo(calculateValue, dependencies)
useMount:组件初始化时执行一次，使用usEffect的控监听特性实现