React Native的组件

什么是React Native 组件？React Native 都有哪些组件？创建组件的三种方式[组件的生命周期](https://react.docschina.org/docs/react-component.html)什么是组件的生命周期?组件的生命周期都包含哪些方法，各有什么用Mounting(装载)：已插入真实 DOMUpdating (更新)：正在被重新渲染Unmounting(移除)：已移出真实 DOM 生命周期的方法都在什么时候调用

什么是React Native 组件？

React 组件就是让你将UI分割成独立的、可重用的一些碎片或部分，这些组件是相互独立的，开发中一般有UI组件、功能组件等。

React Native 都有哪些组件？

React Native 提供了一些内置的组件，我们在React Native的中文网中可以看到组件的完整列表。当前也提供了一些简单的分类。 1、基础组件 2、交互组件 3、列表视图 4、iOS特有组件 5、Android 独有组件 6、其他

创建组件的三种方式

ES6创建组件的方式

默认导出（默认推荐）

... ... export default class More extends Component { render() { return ( <View style={styles.container}> <Text>Hello World</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, });

创建后导出

class More extends Component { render() { return ( <View style={styles.container}> <Text>Hello World</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, }); module.exports = More; ES5创建组件的方式 var More = React.createClass { render() { return ( <View style={styles.container}> <Text > Hello World </Text> </View> ); } } module.exports = More; 函数式定义的无状态组件(没有this指针) function More (props){ return <View style={styles.container}><Text >Hello {props.name}</Text> </View> } module.exports = More;

组件的生命周期

什么是组件的生命周期?

在iOS中UIViewController提供了 (void)viewWillAppear:(BOOL)animated, (void)viewDidLoad (void)viewWillDisappear:(BOOL)animated 等生命周期方法， 在Android中Activity则提供了 onCreate(),onStart(),onResume() ,onPause(),onStop(),onDestroy()等生命周期方法，这些生命周期方法展示了一个界面从创建到销毁的一生。

每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的“生命周期方法”。方法中带有前缀 will 的在特定环节之前被调用，而带有前缀 did 的方法则会在特定环节之后被调用

组件的生命周期都包含哪些方法，各有什么用

组件的生命周期分成三个状态：

Mounting(装载)：已插入真实 DOM

getDefaultProps():在组件挂载之前调用一次,设置属性的默认值。 (es6: static defaultProps)

getInitialState(): 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。 (es6: static constructor())

static getDerivedStateFromProps():组件实例化后和接受新属性时将会调用getDerivedStateFromProps。它应该返回一个对象来更新状态，或者返回null来表明新属性不需要更新任何状态。

注意，如果父组件导致了组件的重新渲染，即使属性没有更新，这一 方法也会被调用。如果你只想处理变化，你可能想去比较新旧值。

调用this.setState() 通常不会触发 getDerivedStateFromProps()

render(): render()方法是必须的。当被调用时，其应该检查this.props 和 this.state并返回以下类型中的一个: React元素。 通常是由 JSX 创建。该元素可能是一个原生DOM组件的表示，如<div/>或者是一个你定义的合成组件。 字符串和数字。 这些将被渲染为 DOM 中的 text node。 Portals。 由 ReactDOM.createPortal 创建。 null。 什么都不渲染。 布尔值。 什么都不渲染。（通常存在于 return test && 写法，其中 test 是布尔值。） 当返回null 或 false时，ReactDOM.findDOMNode(this) 将返回 null。

render()函数应该纯净，意味着其不应该改变组件的状态，其每次调用都应返回相同的结果，同时不直接和浏览器交互。若需要和浏览器交互，将任务放在componentDidMount()阶段或其他的生命周期方法。保持render() 方法纯净使得组件更容易思考。

若 shouldComponentUpdate()返回false，render()函数将不会被调用

componentWillMount()：服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。

componentDidMount()：在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）

Updating (更新)：正在被重新渲染

componentWillReceiveProps(object nextProps) 在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。

shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state，将要渲染之前调用

componentWillUpdate(object nextProps, object nextState)：在接收到新的 props 或者 state 之前立刻调用

注意：你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。

componentDidUpdate(object prevProps, object prevState): 在组件的更新已经同步到 DOM 中之后立刻被调用

该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。

Unmounting(移除)：已移出真实 DOM

componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。 在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素

生命周期的方法都在什么时候调用