RN开发小结

什么是RN

React Native是Facebook基于React 开源的移动端开发框架，React是一个通过声名式UI构建组件的JavaScript库，React Native结合了原生的流畅和React的特性，是目前比较流行的移动端开发框架之一。通过声明组件，组合这些组件，完成App开发的复杂功能，这些组件虽然都是使用JavaScript开发，但是最终渲染都会使用原生API，所以渲染的流畅程度并不会太差。

为什么使用RN

• RN具备跨端的特性，目前支持iOS和Android。目前大多数公司的移动端应用都会在iOS和Android两个平台上同时开发，开发一个feature或者修复一个bug，通常需要两个开发人员。使用React Native，开发的程序可以兼容两个平台，虽然有一些差异需要针对特定平台处理，但是还是可以节约一部分开发人力。
• 灵活更新，不需要等待发版。使用React Native开发的程序，会被打成bundle，供用户下载使用，不需要等待发版周期，这对于一些紧急需求是非常必要的。而且对于iOS的应用，很多时候应用商店会审核不过，导致用户很难体验到新的功能。一些线上bug可能需要发布热更新或者只能等待下一版本修复，但是React Native可以灵活修复，修复版本可以覆盖几乎所有用户。
• 对于开发人员来说，React Native基本上实现了所见即所得，一次修改，快速检验效果，这相比native开发所需要的漫长打包时间，大大提升了开发体验。

Key Tech

React Native通过声明式UI开发组件，然后组合组件开发出更加复杂的组件。组件分为函数式组件和类组件，函数式组件是无状态组件，类组件具备自己的状态和生命周期方法，后来为了减少类组件中各种生命周期方法的样板代码和复用状态的困难，提供了Hook，使得可以使用函数组件使用state和生命周期等特性。

• useState，这是一个hook，我们可以通过它为组件存储一个状态，并在适当的时机修改它。对于一般的变量，函数退出后它就会消失，但是对于useState定义的变量，会被保留。

• useEffect，可以将其看作以下三个函数的组合，当组件渲染完成以后，我们可能需要执行一些操作，那我们可以将这些操作放到useEffect中调用，useEffect会保存传递的函数，在每次渲染以后调用。有一些操作是需要在组件unmount之后删除的，防止内存泄露，可在useEffect的return语句中返回，进行删除。

  componentDidMount() {}  
  componentDidUpdate(){}
  componentWillUnmount(){}

  ​

  useEffect(() => {
      // Have a timer call the function every 5 seconds using setInterval
      const timer = setInterval(() => {}, 5000);
      return () => clearInterval(timer);
  }, []);

• useRef可以用来返回一个可变的ref对象，对象的改变不会触发组件的重新渲染，在整个组件生命周期内是唯一的。

• useMemo，useMemo返回类型不限的值，只有当依赖项变化时才会触发重新计算，

• useCallBack，返回可被记忆的回调，每次依赖项改变时，都能生成新的回调。

踩坑记录

1、在实现两个组件重叠的效果中，往往需要使用绝对定位。使用绝对定位的的组件会脱离文档流，以最近的父布局作为参考，决定位置。但是这必须要指定其自身的高度或者宽度。

2、使用绝对定位有可能使组件被置于其他组件之下，导致点击事件被屏蔽，可以通过动态修改pointer-events属性来决定是否拦截点击事件。

参考文献

• React Hook