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:

 

 对比:

  组件不可修改属性,状态只和自己相关,由自己维护

 

区分:

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

 

 

持续更行中。。。

原文地址:https://www.cnblogs.com/myswift-lhq/p/5752509.html