React基础

解剖index.ios.js

 

Render函数：

返回咱们但愿这个组件渲染出来的视图

 

样式

style的使用，当使用StyleSheet建立的样式时，外层只须要一层{}，而直接声明须要再加一层，即直接声明了匿名变量

建立样式：

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

});

 

使用样式：

 <Text style={styles.container}>

          Welcome to React Native!

          hahaha1234

 </Text>

 

注册组件：

注册根组件：AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

即app运行时的第一个出现的组件

 

JXS语法：

基于ES6的一种新特性

一种定义带属性树结构的语法

 JSX不是XML，也不是HTML

 

React组件的生命周期——不一样生命周期内能够自定义的函数

初始化—》运行中—》销毁

初始化阶段：

1.getDefaultProps——获取实例默认属性

2.getInitialState——获取实例的初始化状态

3.componentWillMount——组件将要装载

4.render——生成虚拟DOM节点JSX，渲染成真正的DOM节点

只能访问this.props和this.state,只有一个顶层组件，不容许修改状态和DOM输出

5.componentDidMount——组件已经装载

 

运行中阶段：

1.componentWillReceiveProps——组件将要接收属性时调用

2.shouldComponentUpdate——当属性接收到新状态时是否更新？

3.componentWillUpdate——组件将要更新

4.render——和初始化阶段一行

5.conponentDidUpdate——组件更新

 

销毁阶段：

componentWillUnmount——销毁前调用

 

React属性和状态

Props:

 

State:

 

 对比：

　　组件不可修改属性，状态只和本身相关，由本身维护

 

区分：

 　　组件在运行时须要修改的数据就是状态

 

 

持续更行中。。。