本篇文章给大家分享的内容是关于Pastate.js 响应式框架之数组渲染与操作 ,有着一定的参考价值,有需要的朋友可以参考一下

这是 Pastate.js 响应式 react state 管理框架系列教程的第三章,欢迎关注,持续更新。

这一章我们来看看在 pastate 中如何渲染和处理 state 中的数组。

渲染数组

首先我们更新一下 state 的结构:

const initState = { basicInfo: ..., address: ..., pets: [{ id:'id01', name: 'Kitty', age: 2 }] }

我们定义了一个有对象元素构成的数组 initState.pets, 且该数组有一个初始元素。

接着,我们定义相关组件来显示 pets 的值:

class PetsView extends PureComponent { render() { /** @type {initState['pets']} */ let state = this.props.state; return ( <p style={{ padding: 10, margin: 10 }}> <p><strong>My pets:</strong></p> {state.map(pet => <PetView state={pet} key={pet.id}/>)} </p> ) } }class PetView extends PureComponent { render() { /** @type {initState['pets'][0]} */ let state = this.props.state; return ( <p> <li> {state.name}: {state.age} years old.</li> </p> ) } }

这里定义了两个组件,第一个是 PetsView,用来显示 pets 数组; 第二个是 PetView,用来显示 pet 元素。
接下来把 PetsView 组件放入 AppView 组件中显示:

... class AppView extends PureComponent { render() { /** @type {initState} */ let state = this.props.state; return ( <p style={{ padding: 10, margin: 10, display: "inline-block" }}> <BasicInfoView state={state.basicInfo} /> <AddressView state={state.address} /> <PetsView state={state.pets} /> </p> ) } } ...

完成!我们成功渲染了一个数组对象,这与用原生 react 渲染数组的模式一样,页面结果如下:

修改数组

首先,我们想添加或减少数组元素,这用 pasate 实现起来非常简单。受 vue.js 启发,pastate 对 store.state 的数组节点的以下7个 数组变异方法 都进行了加强,你可以直接调用这些数组函数,pastate 会自动触发视图的更新。这 7 个数组变异方法如下

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

我们来尝试使用 push 和 pop 来更新数组:

class PetsView extends PureComponent { pushPet(){ state.pets.push({ id: Date.now() + '', name: 'Puppy', age: 1 }) } popPet(){ state.pets.pop() } render() { /** @type {initState['pets']} */ let state = this.props.state; return ( <p style={{ padding: 10, margin: 10 }}> <p><strong>My pets:</strong></p> {state.map(pet => <PetView state={pet} key={pet.id}/>)} <p> <button onClick={this.pushPet}>push pet</button> <button onClick={this.popPet}>pop pet</button> </p> </p> ) } }

非常容易!我们还添加了两个按钮并指定了点击处理函数,运行体验一下:

打开 react dev tools 的 Highlight Updates 选项,并点击 push 或 pop 按钮,可以观察到视图更新情况如我们所愿:

空初始数组与编辑器 intelliSence

通常情况下,数组节点的初始值是空的。为了实现编辑器 intelliSence, 我们可以在外面定义一个元素类型,并注释这个数组节点的元素为该类型:

const initState = { ... /** @type {[pet]} */ pets: [] } const pet = { id: 'id01', name: 'Kitty', age: 2 }

你也可以使用泛型的格式来定义数组类型: /** @type {Array<pet>} */ 。

多实例组件的内部动作处理

上一章我们提到了单实例组件,是指组件只被使用一次;而我们可以到 PetView 被用于显示数组元素,会被多次使用。我们把这类在多处被使用的组件称为多实例组件。多实例组件内部动作的处理逻辑由组件实例的具体位置而定,与单实例组件的处理模式有差别,我们来看看。

我们试着制作一个每个宠物视图中添加两个按钮来调整宠物的年龄,我们用两种传统方案和pastate方案分别实现:

react 传统方案传统方案1:父组件处理

父组件向子组件传递绑定index的处理函数:这种模式是把子组件的动作处理逻辑实现在父组件中,然后父组件把动作绑定对应的 index 后传递给子组件

class PetsView extends PureComponent { ... addAge(index){ state.pets[index].age += 1 } reduceAge(index){ state.pets[index].age -= 1 } render() { /** @type {initState['pets']} */ let state = this.props.state; return ( <p style={{ padding: 10, margin: 10 }}> ... { state.map((pet, index) => <PetView state={pet} key={pet.id} addAge={() => this.addAge(index)} // 绑定 index 值,传递给子组件 reduceAge={() => this.reduceAge(index)} // 绑定 index 值,传递给子组件 />) } ... </p> ) } }class PetView extends PureComponent { render() { /** @type {initState['pets'][0]} */ let state = this.props.state; return ( <p > <li> {state.name}: <button onClick={this.props.reduceAge}> - </button> {/* 使用已绑定 index 值得动作处理函数 */} {state.age} <button onClick={this.props.addAge}> + </button> {/* 使用已绑定 index 值得动作处理函数 */} years old. </li> </p> ) } }