react native 组件

1 组件化的思想

React认为一个组件应该具有如下特征:

  • 可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;

  • 可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;

  • 可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

2 组件的属性与状态

在React Native(React.js)里,组件所持有的数据分为两种:

  • 属性(props):组件的props是不可变的,它只能从其他的组件(例如父组件)传递过来。

  • 状态(state):组件的state是可变的,它负责处理与用户的交互。在通过用户点击事件等操作以后,如果使得当前组件的某个state发生了改变,那么当前组件就会触发render()方法刷新自己。

props

由于props是从其父组件传递过来的,那么可想而知,props的声明应该是在当前组件的父组件里来做。在React Native中,通常props的声明是和当前组件的声明放在一起的:

//最热子页面

//趋势子页面

在这里,收藏页面是父组件,而最热页面和趋势页面是其子组件。在收藏页面组件里声明了最热页面和趋势页面的组件。

最热页面和趋势页面组件都用的是同一个组件:FavoriteTabPage,而这两个页面的不同点只在于传入的两个props的不同:tabLabel和flag。

而在FavoriteTabPage组件内部,如果想调用flag这个props,可以使用this.props.flag来调用。

state

下面是最热和趋势页面的组件:

class FavoriteTabPage extends Component{

//组件的构造方法

constructor(props){

super(props);

this.state={

dataSource:new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2}),

isLoading:false,

}

}

...

}

这里面定义了两个state:

  • dataSource:列表的数据源

  • isLoading:是否正在刷新

这两个state都是将来可能经常变化的。比如在网络请求以后,列表的数据源会被替换掉,这个时候就要调用

this.setState({

//把新的值newDataArr对象传给dataSource

dataSource:newDataArr

})

来触发render()方法来刷新列表组件。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容