ReactNative初步

2018-06-22 本文已影响22人就叫肤浅的大西瓜

文章基本没写过，发现很多东西不动动笔很容易就忘记了，这里主要用于记录自己的一些理解和别人好的文章截取，内容结构比较随意，也没有常规套路，想到啥写点啥，主要是面向自己，也许不适用于大部分人，有问题可以一起交流。

必备知识点

对于前端同学，这些知识点应该不足一道。其实这些点更适于APP端的同学，现在很多APP端同学都有机会扩展一下自己的rn技能，希望我这里能帮到一些人，下面这些点都是我刚开始写rn解决问题的主要知识点。
其中对于js语法其实没必要事无巨细的学习一遍，完全可以一边开发rn一边去补充，当然如果要深入进去的话，肯定是要去好好学习一下的。flex-box布局和JSX基本上也没有深挖的必要，写的多了自然就记住了。react.js这个肯定是需要持续学习的，初期搞懂生命周期、数据载体、数据传递方式基本上就可以上手了，后面深入的点有很多，再慢慢去学习。

es6 / es7
- () => {} 箭头函数
- class
- promise
- async await
- 一些语法糖map、foreach。。。
- 等等
flex-box布局
JSX
react.js
- 生命周期
- props state
- diff
- virtual dom
- 等等

native与rn开发模式

模式对比

Native最常见的是MVC开发模式，数据通过controller设置到view上，view上的交互再通过controller反映到model上。而在RN开发中，所有界面的结构组织及展示都是基于组件的，整个页面的构成更接近组件的拼接，对于每个组件，除了来自父组件的props数据，其本身是个状态机，所有页面的变化都是跟状态一一对应的，每指定一种状态，都会有一个对应的页面。页面上的交互通过一些事件来改变状态，进而又更新了页面。所以整个页面的变化都是跟随状态单向变化的，交互的控制流向也是单向的。

props & state

props

props 是一种从父级向子级传递数据的方式
props 也是父子组件进行通信的一种方式
props 不应被手动修改

state

state 是component的状态，每个component都是一个状态机
在constructor中初始化
通过this.setState()修改

	props	state
能否从父组件获取初始值	true	false
父组件能否修改	true	false
在组件内部能否修改	false	true

示例

父组件调用Clock组件

<Clock clickAction={() => {console.log('Clock click!')}}/>

Clock类

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types';

class Clock extends React.Component {
    static propTypes = {
        clickAction: PropTypes.func,
    };

    constructor(props) {
        super(props);
        this.state = {
            secondCount: 0,
        };
    }

    componentDidMount() {
        this.timer = setInterval(
            () => {
                this.setState((state) => {
                    return {
                        ...state,
                        secondCount: state.secondCount + 1,
                    };
                });
            },
            1000,
        );
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }

    render() {
        return (
            <TouchableOpacity
                onPress={() => {
                    if (this.props.clickAction) {
                        this.props.clickAction();
                    }
                }}
            >
                <View style={styles.view}>
                    <Text style={styles.text}>
                        {'Stay ' + this.state.secondCount + 's'}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    view: {
        marginVertical: 20,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 20,
        color: '#ff9942',
    }
});

export default Clock;

代码比较简单，state控制记录停留了多少秒，props是父组件传递的一个方法，在适当的地方调用。

生命周期

在 shouldComponentUpdate(nextProps, nextState)方法中，我们可以根据 nextProps 或 nextState 的值来确定是否需要重新渲染组件。默认是返回 true，如果返回 false，则后续流程会被中断。主要是用来判断不必要的渲染逻辑，当这里判断逻辑的复杂度如果超过了diff算法，就会得不偿失。
componentWillUpdate(nextProps, nextState) 是在即将更新组件之前的操作。这个方法在当前最新版本的react.js中被重命名为UNSAFE_componentWillUpdate(nextProps, nextState)。在这个方法中，我们不能去调用setState方法，或者做其它可能会引起组件重新渲染的操作。
componentDidUpdate(prevProps, prevState, snapshot) 方法会在组件重新渲染完成之后调用。我们可以看到这时参数名已变成 prevProps和prevState，保存的是更新之前的 props和state。在这个方法中，可以去执行DOM操作，也可以去做网络请求等操作。这里虽然可以调用 setState()方法，不过需要注意加判断逻辑，避免无限循环。

react.js 16.3版本后，实际上，在官方的最新文档中，有几个生命周期方法已被标记为 UNSAFE

UNSAFE_componentWillMount()
UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()

这几个方法对应的无前缀方法如下：

componentWillMount()
componentWillUpdate()
componentWillReceiveProps()

static getDerivedStateFromProps(props, state)这是在 React 16.3 新加入的方法，主要是为了避免在 UNSAFE_componentWillReceiveProps 中使用setState()而产生的副作用。生命周期为下图所示

参考

https://mp.weixin.qq.com/s/mvhk2ehvS_fL3wO_tELdoA