• rn组件的主轴默认值为column，pc端默认值为row，刚好相反

• React Native的渲染机制是对于JsBundle的加载。项目中所有的js文件最终会被打包成一个JsBundle文件

• ( 链接)

  没有‘default’关键词的导出代表这是一个被命名的导出。在一个单独的文件中可以有多个被命名的导出，所以你可以这么写：

    export class Template {}
    export class AnotherTemplate {}
  

  然后你需要使用这些模块的精确的名字来导入它们。所以在另一个文件中使用这些组件的时候，你需要这么写：

    import {Template, AnotherTemplate} from ‘./components/templates’
  

  可选择的，如果你利用’default’来导出：

    export default class Template {}
  

  那么当你在另一个文件中引用这个默认的导出时不需要使用{}，就像这样：

    import Template from ‘./components/templates’
  

  每一个文件只能拥有一个默认的导出。在React中，一个文件导出一个组件是一种约定，并且作为默认导出来导出。 当你引入默认导出时，你可以重新命名它：

    import TheTemplate from ‘./components/templates’
  

  你也可以同时引入默认导出和被命名的导出：

    import Template,{AnotherTemplate} from ‘./components/template’
  

  react就是利用了这样的方式：

      import React, { Component } from 'react'
  

React生命周期

概述

React Native在内存中维护着一个虚拟DOM，组件的生命周期指组件初始化并挂载到虚拟DOM为起始，到组件从虚拟DOM卸载为终结。

挂载

挂载指组件的实例被创建并插入到DOM中，挂载会调用如下方法。

constructor

constructor是RN组件的构造方法，它在RN组件被加载前先被调用。当组件继承自React.Component时，需要在构造方法中最先调用super(props)。如果不需要初始化state，则不需要实现构造方法。 在构造方法中初始化state，如下所示：

constructor(props) {
    super(props);
    this.state = {
        text: ‘构造方法’    
    };
}

componentWillMount

componentWillMount()

ComponentWillMount方法在挂载前被立即调用。它在render方法之前被执行，因此， 在componentWillMount方法中设置state并不会导致重新被渲染。它只会被执行一次，通常情况下，建议使用constructor方法来代替它。 render

render()

该方法是必须的。一旦调用，会检查this.props和this.state的数据并返回一个React元素。render方法中不应该修改组件的props和state。因为render方法是“纯洁的”，这意味着每次调用该方法时都会返回相同的结果。render方法在更新阶段也会被调用，前提是shouldComponnetUpdate方法返回true。

componentDidMount

componentDidMount()

componentDidMount方法在组件被挂载后立即调用，在render方法后被执行。开发者可以在这个方法中获取其中的元素或子组件。需要注意的是，子组件的componentDidMount方法会在父组件的componentDidMount方法之前调用。如果需要从网络加载数据显示到页面上，在这里进行网络请求是一个不错的选择。在componentDidMount方法中设置state将会被重新渲染。

更新

改变props或者state时可以导致更新，当一个组件被重新渲染时，会调用如下方法：

componentWillReceiveProps

componentWillReceiveProps(nextProps)

componentWillReceiveProps方法会在挂载的组件接收到新的props时被调用，它接收一个Object类型参数nextProps，表示新的props。通常在这个方法中接收新的props值，并根据props的变化，通过调用this.setState()来更新组件state，this.setState()不会触发render方法的调用。在挂载的过程中，初始的props并不会触发调用componentWillReceiveProps方法，这个方法只会在组件的props更新时被调用。另外，调用this.setState()也不会触发调用componentWillReceiveProps方法。

shouldComponentUpdate

boolean shouldComponentUpdate(nextProps, nextState)

当组件接收到新的props和state时，shouldComponentUpdate方法被调用，它接收两个Object参数，nextProps是新的props，nextState是新的state。 shouldComponentUpdate方法默认返回true，用来保证数据变化时，组件能够重新渲染。你也可以重载这个方法，通过检查变化前后props和state来决定是否需要重新渲染。如果返回false，则组件不会被重新渲染，也不会调用本方法后面的componentWillUpdate和componentDidUpdate方法。

componentWillUpdate

 componentWillUpdate(nextProps, nextState)

如果组件props或者state改变，并且此前的shouldComponentUpdate方法返回true，则会调用该方法。componentWillUpdate方法会在组件重新渲染前被调用，因此，可以在这个方法中为重新渲染做一些准备工作。需要注意的是，在这个方法中，不能使用this.setState来更改state，如果想要根据props来更改state，需要在componentWillReceiveProps方法中去实现，而不是在这里。

componentDidUpdate

componentDidUpdate(prevProps, prevState)

组件重新渲染完成后会调用componentDidUpdate方法。两个参数分别是渲染前的props和渲染前的state。这个方法也适合写网络请求，比如可以将当前的props和prevProps进行对比，发生变化则请求网络。

卸载

componentWillUnmount

componentWillUnmount()

componentWillUnmount方法在组件卸载和销毁之前被立即调用。可以在这个方法中执行必要的清理工作，比如，关掉计时器、取消网络请求、清除组件装载中创建的DOM元素等。

cmd+P 调整网络

state

state属性用来存储组件自身需要的数据，每次数据的更新都是通过修改state属性值，rn内部会监听state属性，一旦变化即会出发render方法更新dom。

render

render:渲染并返回一个虚拟dom

TouchableNativeFeedback

本组件用于封装视图，使其可以正确响应触摸操作（仅限Android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈。目前它只支持一个单独的View实例作为子节点。在底层实现上，实际会创建一个新的RCTView节点替换当前的子View，并附带一些额外的属性。

其中，ripple方法创建一个表示用指定颜色绘制波纹的对象（作为字符串）仅在Android API 21+上使用。

this

在使用 JavaScript classes 时，你必须调用 super(); 方法才能在继承父类的子类中正确获取到类型的 this 。

组件的返回值只能有一个根元素。这也是我们要用一个<div>来包裹所有<Welcome />元素的原因。

function App() {
  return (   
    <div>    // <===== div包裹 
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

props只读性

无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。

state

• 状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。
• 组件可以选择将其状态作为属性传递给其子组件：

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

如果你没有使用属性初始化器语法，你可以在回调函数中使用 箭头函数：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

当你在map()方法的内部调用元素时，你最好随时记得为每一个元素加上一个独一无二的key。

key会作为给React的提示，但不会传递给你的组件。如果您的组件中需要使用和key相同的值，请将其作为属性传递：

style

• 样式名需要用驼峰命名法
• 属性可以是JavaScript对象
• 也可以是一个数组（在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。）