文章基本没写过，发现很多东西不动动笔很容易就忘记了，这里主要用于记录自己的一些理解和别人好的文章截取，内容结构比较随意，也没有常规套路，想到啥写点啥，主要是面向自己，也许不适用于大部分人，有问题可以一起交流。
必备知识点
对于前端同学，这些知识点应该不足一道。其实这些点更适于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()而产生的副作用。生命周期为下图所示
参考
