Array rendering and operation of Pastate.js responsive framework

The content of this article is about the array rendering and operation of the Pastate.js responsive framework. It has a certain reference value. Friends in need can refer to it.

This is the Pastate.js response The third chapter of the series of tutorials on the react state management framework. Welcome to pay attention and continue to update.

In this chapter we will take a look at how to render and process arrays in state in paste.

Rendering array

First we update the state structure:

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

We define an array initState.pets consisting of object elements, and the array has an initial element .

Next, we define relevant components to display the value of 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>
        )
    }
}

Two components are defined here, the first is PetsView, used to display the pets array; the second is PetView, Used to display pet elements.
Next, put the PetsView component into the AppView component to display:

...
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>
        )
    }
}
...

Done! We successfully rendered an array object, which is the same as the mode of rendering arrays with native react. The page results are as follows:

Modify array

First, we want to add or subtract array elements, which is very simple to achieve with pasate. Inspired by vue.js, pastate has enhanced the following seven array mutation methods of the array node of store.state. You can call these array functions directly, and pastate will automatically trigger the update of the view. These 7 array mutation methods are as follows

• ##push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse( )

Let’s try using push and pop to update an array:

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>
        )
    }
}

Very easy! We also added two buttons and specified the click processing function. Let’s run and experience it:

Open the Highlight Updates option of react dev tools and click push or pop button, we can observe that the view updates as we wish:

Empty initial array and editor intelliSence

Normally, the initial value of an array node is empty. In order to implement editor intelliSence, we can define an

element type outside, and annotate the elements of this array node as this type:

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

You can also use a generic format to define the array type:

/**@type {Array}*/ .

Internal action processing of multi-instance components

We mentioned in the previous chapter

Single instance components, which means that the component is only used once; and we can use it in PetView For displaying array elements, it will be used multiple times. We call such components that are used in multiple places multi-instance components. The processing logic of the internal actions of a multi-instance component is determined by the specific location of the component instance, which is different from the processing mode of a single-instance component. Let's take a look.

We try to make a way to add two buttons to each pet view to adjust the age of the pet. We use two traditional solutions and a pastate solution to implement them respectively:

react traditional solution

Traditional solution 1: Parent component processing

The parent component passes the binding index processing function to the child component: This mode implements the action processing logic of the child component in the parent component , and then the parent component binds the action to the corresponding index and passes it to the child component

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>
        )
    }
}

This mode can unify the processing of actions at a component level. If the view meaning of a multi-instance component is unclear and has a universal properties, such as the Button component encapsulated by itself, etc., it is best to use this action processing mode. However, if the meaning of a multi-instance component is obvious and not universal, especially if it is used to display array elements, using this mode will cause redundant rendering processes.

Open the Highlight Updates option of react dev tools and click a few times

push pet After adding some elements, click the or - button to see Component re-rendering:

It can be found that when we only modify the value inside a certain array element (pet[x].age), Other array elements will also be re-rendered. This is because Pet.props.addAge and Pet.props.reduceAge are anonymous objects that will be regenerated every time the parent component PetsView is rendered. PureComponent uses this to think that the data the component depends on has been updated, so it triggers re-rendering. Although this problem can be solved manually using React.Component with a custom shouldComponentUpdate life cycle function, the anonymous subcomponent property value is regenerated every time the parent component PetsView is rendered, which also consumes computing resources.

传统方案2:子组件结合 index 实现

父组件向子组件传递 index 值：这种模式是父组件向子组件传递 index 值，并在子组件内部实现自身的事件处理逻辑，如下：

class PetsView extends PureComponent {
    ...
    render() {
        ...
        return (
            <p style={{ padding: 10, margin: 10 }}>
                ...
                {
                    state.map((pet, index) => 
                        <PetView 
                            state={pet} 
                            key={pet.id} 
                            index={index} // 直接把 index 值传递给子组件
                        />)
                }
                ...
            </p>
        )
    }
}

class PetView extends PureComponent {

    // 在子组件实现动作逻辑

    // 调用时传递 index
    addAge(index){
        state.pets[index].age += 1
    }

    // 或函数自行从 props 获取 index
    reduceAge = () => { // 函数内部使用到 this 对象，使用 xxx = () => {...} 来定义组件属性更方便
        state.pets[this.props.index].age -= 1
    }

    render() {
        /** @type {initState['pets'][0]} */
        let state = this.props.state;
        let index = this.props.index;
        return (
            <p >
                <li> {state.name}: 
                    <button onClick={() => this.reduceAge(index)}> - </button> {/* 使用闭包传递 index 值 */}
                    {state.age} 
                    <button onClick={this.addAge}> + </button> {/* 或让函数实现自己去获取index值 */}
                    years old.
                </li>
            </p>
        )
    }
}

这种模式可以使子组件获取 index 并处理自身的动作逻辑，而且子组件也可以把自身所在的序号显示出来，具有较强的灵活性。我们再来看看其当元素内部 state 改变时，组件的重新渲染情况：

我们发现，数组元素组件可以很好地按需渲染，在渲染数组元素的情况下这种方法具有较高的运行效率。

但是，由于元素组件内部操作函数绑定了唯一位置的 state 操作逻辑，如addAge(index){ state.pets[index].age += 1}。假设我们还有 state.children 数组，数组元素的格式与 state.pets 一样, 我们要用相同的元素组件来同时显示和操作这两个数组时，这种数组渲染模式就不适用了。我们可以用第1种方案实现这种情况的需求，但第1种方案在渲染效率上不是很完美。

pastate 数组元素操作方案

Pastate 的 imState 的每个节点本身带有节点位置的信息和 store 归宿信息，我们可以利用这一点来操作数组元素！

pastate 方案1:获取对于的响应式节点

我们使用 getResponsiveState 函数获取 imState 对于的响应式 state，如下：

class PetsView extends PureComponent {
    ...
    render() {
        ...
        return (
            <p style={{ padding: 10, margin: 10 }}>
                ...
                {
                    state.map((pet, index) => 
                        <PetView 
                            state={pet} 
                            key={pet.id}   {/* 注意，这里无需传递 index 值，除非要在子组件中有其他用途*/}
                        />)
                }
                ...
            </p>
        )
    }
}

import {..., getResponsiveState } from 'pastate'

class PetView extends PureComponent {
    addAge = () => {
        /** @type {initState['pets'][0]} */
        let pet = getResponsiveState(this.props.state); // 使用 getResponsiveState 获取响应式 state 节点
        pet.age += 1
    }
    reduceAge = () => {
        /** @type {initState['pets'][0]} */
        let pet = getResponsiveState(this.props.state); // 使用 getResponsiveState 获取响应式 state 节点
        pet.age -= 1
    }
    render() {
        /** @type {initState['pets'][0]} */
        let state = this.props.state;
        return (
            <p >
                <li> {state.name}: 
                    <button onClick={this.reduceAge}> - </button>
                    {state.age} 
                    <button onClick={this.addAge}> + </button>
                    years old.
                </li>
            </p>
        )
    }
}

我们可以看到，子组件通过 getResponsiveState 获取到当前的 props.state 对应的响应式 state，从而可以直接对 state 进行复制修改，你无需知道 props.state 究竟在 store.state 的什么节点上! 这种模式使得复用组件可以在多个不同挂载位置的数组中使用，而且可以保证很好的渲染性能：

pastate 方案2:使用 imState 操作函数

Pastate 提供个三个直接操作 imState 的函数，分别为 set, merge, update。我们来演示用这些操作函数来代替  getResponsiveState 实现上面操作宠物年龄的功能：

import {..., set, merge, update } from 'pastate'

class PetView extends PureComponent {
    addAge = () => {
        set(this.props.state.age, this.props.state.age + 1); 
    }
    reduceAge = () => {
        merge(this.props.state, {
            age: this.props.state.age - 1
        });
    }
    reduceAge_1 = () => {
        update(this.props.state.age, a => a - 1);
    }
    ...
}

可见，这种 imState 操作函数的模式也非常简单！

使用 pastate 数组元素操作方案的注意事项：当操作的 state 节点的值为 null 或 undefined 时,  只能使用 merge 函数把新值 merge 到父节点中，不可以使用  getResponsiveState ，set 或 update。我们在设计 state 结构时，应尽量避免使用绝对空值，我们完全可以用 '', [] 等代替绝对空值。

下一章，我们来看看如何在 pastate 中渲染和处理表单元素。

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

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

相关推荐：

Pastate.js 之响应式 react state 管理框架

Pastate.js 响应式框架之多组件应用

The above is the detailed content of Array rendering and operation of Pastate.js responsive framework. For more information, please follow other related articles on the PHP Chinese website!