文章基本沒寫過，發(fā)現(xiàn)很多東西不動(dòng)動(dòng)筆很容易就忘記了，這里主要用于記錄自己的一些理解和別人好的文章截取，內(nèi)容結(jié)構(gòu)比較隨意，也沒有常規(guī)套路，想到啥寫點(diǎn)啥，主要是面向自己，也許不適用于大部分人，有問題可以一起交流。

必備知識(shí)點(diǎn)

對(duì)于前端同學(xué)，這些知識(shí)點(diǎn)應(yīng)該不足一道。其實(shí)這些點(diǎn)更適于APP端的同學(xué)，現(xiàn)在很多APP端同學(xué)都有機(jī)會(huì)擴(kuò)展一下自己的rn技能，希望我這里能幫到一些人，下面這些點(diǎn)都是我剛開始寫rn解決問題的主要知識(shí)點(diǎn)。
其中對(duì)于js語法其實(shí)沒必要事無巨細(xì)的學(xué)習(xí)一遍，完全可以一邊開發(fā)rn一邊去補(bǔ)充，當(dāng)然如果要深入進(jìn)去的話，肯定是要去好好學(xué)習(xí)一下的。flex-box布局和JSX基本上也沒有深挖的必要，寫的多了自然就記住了。react.js這個(gè)肯定是需要持續(xù)學(xué)習(xí)的，初期搞懂生命周期、數(shù)據(jù)載體、數(shù)據(jù)傳遞方式基本上就可以上手了，后面深入的點(diǎn)有很多，再慢慢去學(xué)習(xí)。

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

native與rn開發(fā)模式

模式對(duì)比

Native最常見的是MVC開發(fā)模式，數(shù)據(jù)通過controller設(shè)置到view上，view上的交互再通過controller反映到model上。而在RN開發(fā)中，所有界面的結(jié)構(gòu)組織及展示都是基于組件的，整個(gè)頁面的構(gòu)成更接近組件的拼接，對(duì)于每個(gè)組件，除了來自父組件的props數(shù)據(jù)，其本身是個(gè)狀態(tài)機(jī)，所有頁面的變化都是跟狀態(tài)一一對(duì)應(yīng)的，每指定一種狀態(tài)，都會(huì)有一個(gè)對(duì)應(yīng)的頁面。頁面上的交互通過一些事件來改變狀態(tài)，進(jìn)而又更新了頁面。所以整個(gè)頁面的變化都是跟隨狀態(tài)單向變化的，交互的控制流向也是單向的。

props & state

props

• props 是一種從父級(jí)向子級(jí)傳遞數(shù)據(jù)的方式
• props 也是父子組件進(jìn)行通信的一種方式
• props 不應(yīng)被手動(dòng)修改

state

• state 是component的狀態(tài)，每個(gè)component都是一個(gè)狀態(tài)機(jī)
• 在constructor中初始化
• 通過this.setState()修改

示例

父組件調(diào)用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;

代碼比較簡(jiǎn)單，state控制記錄停留了多少秒，props是父組件傳遞的一個(gè)方法，在適當(dāng)?shù)牡胤秸{(diào)用。

生命周期

生命周期

• 在 shouldComponentUpdate(nextProps, nextState)方法中，我們可以根據(jù) nextProps 或 nextState 的值來確定是否需要重新渲染組件。默認(rèn)是返回 true，如果返回 false，則后續(xù)流程會(huì)被中斷。主要是用來判斷不必要的渲染邏輯，當(dāng)這里判斷邏輯的復(fù)雜度如果超過了diff算法，就會(huì)得不償失。
• componentWillUpdate(nextProps, nextState) 是在即將更新組件之前的操作。這個(gè)方法在當(dāng)前最新版本的react.js中被重命名為UNSAFE_componentWillUpdate(nextProps, nextState)。在這個(gè)方法中，我們不能去調(diào)用setState方法，或者做其它可能會(huì)引起組件重新渲染的操作。
• componentDidUpdate(prevProps, prevState, snapshot) 方法會(huì)在組件重新渲染完成之后調(diào)用。我們可以看到這時(shí)參數(shù)名已變成 prevProps和prevState，保存的是更新之前的 props和state。在這個(gè)方法中，可以去執(zhí)行DOM操作，也可以去做網(wǎng)絡(luò)請(qǐng)求等操作。這里雖然可以調(diào)用 setState()方法，不過需要注意加判斷邏輯，避免無限循環(huán)。

react.js 16.3版本后，實(shí)際上，在官方的最新文檔中，有幾個(gè)生命周期方法已被標(biāo)記為 UNSAFE

• UNSAFE_componentWillMount()
• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

這幾個(gè)方法對(duì)應(yīng)的無前綴方法如下：

• componentWillMount()
• componentWillUpdate()
• componentWillReceiveProps()

static getDerivedStateFromProps(props, state)這是在 React 16.3 新加入的方法，主要是為了避免在 UNSAFE_componentWillReceiveProps 中使用setState()而產(chǎn)生的副作用。生命周期為下圖所示

參考

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