React Native基础&入门教程：以一个To Do List小例子，看props和state
本文由葡萄城技术团队于博客园原创并首发
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
在上篇中，我们介绍了什么是Flexbox布局，以及如何使用Flexbox布局。还没有看过的小伙伴欢迎回到文章列表点击查看之前的文章了解。
那么，当我们有了基本的布局概念之后，就可以做一些有意思的尝试了。不过，它们会有一个美中不足：只是静静地呆在那里，不接受反馈。换句话说，它们从应用开始到结束，只有一种状态。
注意，上面这句话其实包含了RN中（当然同时也是React中）两个非常重要的概念：
- 第一，“从应用开始到结束”，意味着它在时间上有一段生命周期（Life Cycle）。
- 第二，应用其实可以拥有很多种状态（State），比如，正常时是一种状态，出错时是另一种状态。而且这些状态能够在某些条件下进行转换。
基本概念：
在RN中，界面的变化对应着程序状态的变化。或者说，界面的变化，正是因为应用的状态发生了转换而导致的。应用的状态主要由两个变量决定，props和state，它们可以存在于继承自React.Component的每一个组件中。state由组件自身定义，用来管理组件及其子组件的状态。而props来自于父组件，在本组件中相当于常量，它的改变方式只能来自于父组件。
在RN中，界面的变化对应着程序状态的变化。或者说，界面的变化，正是因为应用的状态发生了转换而导致的。应用的状态主要由两个变量决定，props和state，它们可以存在于继承自React.Component的每一个组件中。state由组件自身定义，用来管理组件及其子组件的状态。而props来自于父组件，在本组件中相当于常量，它的改变方式只能来自于父组件。
state和props都不允许手动地直接设值。像this.state.a = 1或者this.props.b = 2这种代码是会报错的。要改变state，只能是在本组件中调用this.setState方法。而要改变props，只能依赖于它的值在传下来之前，已经在其父组件中被改变。
既然在组件中，state属性无论从字面含义还是程序语义上，都是用来表示状态的，那么为什么还需要一个props属性呢？
我的理解主要有两个原因。
第一，因为有些组件其实是“无状态”的。它们只是接受父组件传给它们的东西，然后老老实实把它们渲染出来。它们自己内部不保存任何状态，它们只是对父组件状态的反应。或者说：“它们不生产状态，它们只是父组件状态的显示器。”父组件的状态通过props传递给子组件。我们经常会构造这种无状态的组件，因为它职责单一，封装性好，可作为更复杂组件的基石。
第二，由于父组件与子组件之间往往需要联动，props就是最直接的提供联动的手段。父组件中构造子组件时，就像函数调用的传参一样，把需要的东西传给子组件的props。
state和props的重要特点是，默认情况下。当它们改变时，RN会自动东西渲染与之相关的界面以保持和state与props同步。为什么说“默认情况下”，是因为我们可以利用生命周期函数手动“截断”这个渲染逻辑，本文暂不涉及。
另外，在RN中，其实也可以使用不属于props和state的变量，来手动控制组件的状态。但是不推荐这么做。因为这会使状态的控制方法变得不统一，不利于后期维护。
开始尝试：
我们已经可以基于state与props的概念做一个小练习了。它是一个ToDo List，也就是待办列表。大概长下面这个样子：
To Do List草图
我们把它分为两个页面。最左边是添加待办事项的界面，记为ToDoListAdd。中间和最右边其实是同一个界面，记为ToDoListMain，它拥有两种不同状态。
我们先来看ToDoListAdd界面。它有上中下三个部分。最上面是一个可点击返回的头部，中间是用于输入文字的TextInput，底部是一个确认添加的Button。
有没有发现它和上一次我们的flexbox小练习界面很像呢？没错，基于上一篇的布局知识，我们可以方便地把页面修改成这样。
再来看ToDoListMain界面，它与ToDoListAdd很像。头部的"添加"用以跳转至ToDoListAdd。“多选”用以让每一个待办项的Checkbox显示出来，并且显示最下面包含全选Checkbox的footer。
要完整地完成这个应用，本文的篇幅是不够的，后续文章会深入到更加细节的地方。但是首先，本文会介绍如何实现以下基本功能：1.利用state控制编辑状态；2.利用state实现界面的跳转；3.父子组件之间的通信。让我们着手编写程序，穿插着介绍着三点内容。
步骤1，使用flex布局完成ToDoListAdd界面。在根目录新建一个文件ToDoListAdd.js，定义ToDoListAdd类。为更加简洁，这里省去必要组件的引入代码，以及样式代码。
export default class ToDoListAdd extends Component<Props> {
constructor(props) {
super(props);
}
onPress() { } // 暂且为空
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.add} onPress={this.props.onBack}>返回</Text>
</View>
<View style={styles.body}>
<TextInput />
</View>
<View style={styles.footer}>
<Button title="确定" onPress={this.onPress} style={styles.btn} />
</View>
</View>
);
}
}
值得注意的是，这里"返回"按钮的onPress回调函数来自于props。也就是说，当这个ToDoListAdd被使用的时候，父组件需要指定传给子组件（这里子组件就是ToDoListAdd）的onBack的值。可以看到，到目前为止，上面的ToDoListAdd组件其实是一个"无状态"组件。它只是对父组件传来的props的渲染。但实际上，TextInput通常是有状态的，因为里面的值会随着用户的改动而变化。这里我们暂时没有处理它。
步骤2，初步创建ToDoListMain组件。当开始构思这个组件的时候，至少有两件事情是需要考虑的：
待办事项的数据源，应该来自那里？显示和隐藏底部的状态存应该在哪里？
第一个问题，为了叙述方便，我们把待办事项的数据源用变量todoList来表示。 todoList可以理解为一些状态，它是需要在ToDoListMain组件中被显示和操作的。有两个todoList的可选位置，要么放在ToDoListMain组件自身，要么放在ToDoListMain更上一层的组件中。于此同时，当ToDoListAdd组件试图添加一个新的待办事项时，ToDoListAdd组件是需要修改todoList这个数据源的。如果todoList在ToDoListMain组件中，ToDoListAdd组件就需要和ToDoListMain组件进行通信。但这其实就绕了一个圈子，因为从草图的逻辑上看，ToDoListAdd是与ToDoListMain同级的一个界面，它们之间要通信，一般的做法是借助于共同的父组件。所以，就这个例子来说，把数据源就直接放在ToDoListAdd和ToDoListMain共同的父组件中是更方便的选择。接下来会看到，这个共同的父组件就是App.js，它将引入ToDoListAdd和ToDoListMain，我们还会App.js中手动设置渲染选择的逻辑。
第二个问题，显示和隐藏底部是只在ToDoListMain组件中使用的状态，它不与外界有联系，所以放在它内部即可。
经过上面的分析，我们创建初步创建ToDoListMain如下：
export default class ToDoListmain extends Component<Props> {
constructor(props) {
super(props);
this.state = {
isEditing: false
};
this.onEdit = this.onEdit.bind(this);
this.renderItem = this.renderItem.bind(this);
}
renderFooter(toggleCheckAll, isAllChecked) {
if (!this.state.isEditing) {
return null;
}
const count = this.props.todoList.filter(item => item.isChecked).length;
return (
<View style={styles.footer}>
<CheckBox onValueChange={toggleCheckAll} value={isAllChecked} />
<Text style={styles.menu}>{`已选择:${count}项`}</Text>
</View>
);
}
onEdit() {
this.setState((prevState) => {
return {
isEditing: !prevState.isEditing
}
});
}
renderItem(item) {
return (<ToDoListItem {...item}
toggleItemCheck={this.props.toggleItemCheck}
isEditing={this.state.isEditing} />);
}
render() {
const { toggleCheckAll, isAllChecked, onAddItem, todoList } = this.props;
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.add} onPress={onAddItem}>添加</Text>
<Text style={styles.title}>待办列表</Text>
<Text style={styles.multi}
onPress={this.onEdit}>{this.state.isEditing ? '取消' : '多选'}
</Text>
</View>
<FlatList style={styles.body} isEditing={this.state.isEditing}
data={todoList} renderItem={this.renderItem} />
{this.renderFooter(toggleCheckAll, isAllChecked)}
</View>
);
}
}
我们看到该组件只有一个状态，isEditing。它控制了左上角的文字是"取消"还是"多选"，也控制了底部是否显示。
我们在控制底部是否显示时，调用了一个自定义的函数，用它的返回值最为内容插入在调用函数的位置。在RN中，如果在渲染的时候返回null，就表示什么也不渲染。所以调用renderFooter时，在isEditing状态为false时，什么都不渲染。
toggleCheckAll用来控制是否全选待办事项。isAllChecked是判断是否全选。onAddItem用作点击"添加"文字的回调。而todoList就是最重要的待办事项的数据源了。它们都来自ToDoListMain的父组件，通过props传下来。
而ToDoListMain组件内部，有一个onEdit函数，用作右上角"取消"和"多选"文字onPress时的回调。在里面我们看到RN中设置state的正确方式是调用this.setState方法。
另外，为了演示方便，这里使用官方提供的Checkbox组件来表示待办事项是否check了。但这个Checkbox组件的其实只有Android平台才有，iOS下没有。而对iOS的处理，打算在后面的文章中专门分享。
还有一点值得注意的地方，是引入了FlatList组件来对todoList数据源进行渲染。FlatList是官方提供的用意显示列表的组件，老版本的ListView已经被标记为弃用了（deprecated）。FlatList组件对列表的渲染做了许多性能优化和功能增强。我们暂时只是使用它来简单显示待办列表。
每一个待办事项使用了自定义的另一个组件ToDoListItem，我们马上来看看它。
步骤3，实现ToDoListItem组件。它没有自己的状态，也只是对父组件内容的展示。
export default class ToDoListItem extends Component<Props> {
constructor(props) {
super(props);
}
render() {
const { toggleItemCheck, item } = this.props;
const { isChecked, detail, level } = item;
const basicLevelStyle = styles.level;
let specificLevelStyle;
if (level === 'info') {
specificLevelStyle = styles.info;
} else if (level === 'warning') {
specificLevelStyle = styles.warning;
} else {
specificLevelStyle = styles.error;
}
return (
<View style={styles.container}>
{this.props.isEditing && <CheckBox onValueChange={(value) => toggleItemCheck(item, value)} style={styles.checkbox} value={isChecked} />}
<Text style={styles.detail}>{detail}</Text>
<View style={[basicLevelStyle, specificLevelStyle]}></View>
</View>
);
}
}
特别是，每一项是否被check，这个状态其实来自于todoList数据源，而每一项的Checkbox的value完全受控于父组件传来的值，所以这种用户输入型的组件，其值完全受控于父组件的props的传值的，也常被称为受控组件（Controlled Component）。
另外，todoList的每一项，我们用level来表示待办项的某种等级，用detail表示它的内容，用isChecked来表示它是否完成。
但是做了这么多，我们还啥都没看到呢。所以，接下来的关键一步，就是把ToDoListMain和ToDoListAdd的渲染逻辑一口气写到App.js中去。
步骤4，写最外层的渲染逻辑。在App.js中，引入
import ToDoListMain from './ToDoListMain'; import ToDoListAdd from './ToDoListAdd';
然后定义App组件
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
current: 'main',
todoList: [
{
level: 'info',
detail: '一般的任务',
isChecked: false,
key: '0'
},
{
level: 'warning',
detail: '较重要的任务',
isChecked: false,
},
{
level: 'error',
detail: '非常重要且紧急的任务',
isChecked: false,
key: '2'
}
]
}
this.onAddItem = this.onAddItem.bind(this);
this.onBack = this.onBack.bind(this);
this.toggleCheckAll = this.toggleCheckAll.bind(this);
this.toggleItemCheck = this.toggleItemCheck.bind(this);
}
onAddItem() {
this.setState((prevState) => {
return {
current: 'add'
}
});
}
onBack() {
this.setState({
current: 'main'
});
}
toggleCheckAll() {
const flag = this.isAllChecked();
const newTodos = this.state.todoList.map(item => {
return {
...item,
isChecked: !flag
};
});
this.setState({
todoList: newTodos
});
}
toggleItemCheck(item, key) {
const newTodos = this.state.todoList.map(todo => {
if (todo !== item) {
return todo;
}
return {
...todo,
isChecked: !item.isChecked
}
});
this.setState({
todoList: newTodos
});
}
isAllChecked() {
if (!this.state.todoList) return false;
if (this.state.todoList.length === 0) return false;
return this.state.todoList.every(item => item.isChecked);
}
render() {
if (this.state.current === 'main') {
return (<ToDoListMain
isAllChecked={this.isAllChecked()}
toggleCheckAll={this.toggleCheckAll}
toggleItemCheck={this.toggleItemCheck}
onAddItem={this.onAddItem}
todoList={this.state.todoList} />);
} else {
return (<ToDoListAdd onBack={this.onBack} />);
}
}
}
我们看到App组件有两个状态，一个是current，用以指定当前渲染的是哪个界面（其实我们这里就两个界面）。另一个是todoList数据源。
界面是如何切换的呢？
观察render函数，里面就是界面渲染逻辑，如果this.state.current的值是main，那么就会渲染App就会渲染ToDoListMain，否则，渲染ToDoListAdd。你可以理解成，我们手动实现了一个特别简单的前端路由。这一切都是基于当state变化时，相应的界面自动重新渲染了。
更具体地来说，我们把onAddItem作为props的一个属性传给ToDoListMain，把onBack也作为一个属性传给ToDoListAdd。所以当它们的头部相应文字被点击时，实际上调用的，是定义在App组件中的回调函数。回调函数修改了current状态，而current状态的修改引起了App的render函数重新被调用，它根据当前的current状态而重新渲染了相应的界面。
todoList中每项的key值是给FlatList作为唯一标识用的。
另外，在setState句子中，我们会构造一个新的变量，然后一把setState，而不是去修改原有的state。这也是RN中的常用做法。对于初学者来说，可能语法有点怪异。不过，这样做是有它的理由的。简单的说，因为RN在底层大量使用了比较对象是否变化的逻辑，如果挨个便利对象的每个属性，而且对象很复杂的话，这个比较的逻辑是很慢的。但是，比较两个对象的引用是否相等却很容易，直接一个表达式就可以了。所以，我们在setState时往往会构造一个新的对象。更深的机理就留给读者去探索啦。
好了，让我们运行起程序，看看效果怎么样吧。
本文通过一个ToDo List的例子，介绍了RN中最基本的两个概念state和props。并简单实现了状态提升、组件间的通信等功能。
不过这个例子还没完。这个ToDo List目前只是一个展示的功能，如何对它们进行编辑、添加、删除，后续会进一步分享。
文章中使用到的源码下载： todo-list.zip
