React 【认识 State】定义state、修改state、state的不可变原则、state的props的区别

目录：

1. 如何定义 State

2. 如何修改 State

　　使用 setState

　　setState 是异步的

　　State 的更新是一个浅合并的过程

3. State 的不可变原则

　　值类型

　　数组类型

　　对象类型

4. State 和 Props 的区别

　　state

　　props

　　state 和 props 的联系

 

　　React 的核心思想是组件化的思想，应用由组件搭建而成。组件中最重要的概念是 State，State 是组件的 UI 数据模型，是组件渲染时的一个数据依据。

一、如何定义 State

　　State 代表组件 UI 状态的变化。

　　在 React 应用中，当涉及到组件 UI 变化的时候，必须要将变量定义成 State 值。

　　定义 State 值的方式可以是在 constructor 中初始化 state值。

 例 子 

　　父组件是 App.js，子组件是 listItem.jsx。目前在页面上点击“+”“-”按钮可以改变 count 的值，但是 UI 不会变化。

import React, { Component } from 'react';
import ListItem from './components/listItem'

const listData = [
    {
        id: 1,
        name: '红苹果',
        price: 2
    },
    {
        id: 2,
        name: '青苹果',
        price: 3
    },
]

class App extends Component {
    renderList(){
        return listData.map( item => {
            return(
                <ListItem 
                    key={item.id} 
                    data={ item } 
                    onDelete={this.handleDelete}
                />
            )
        })
    }
    handleDelete = (id) => {
        console.log( 'id:', id );
    }
    render() { 
        return(
            <div className="container">
                { listData.length === 0 && <div className="text-center">购物车是空的</div> }
                { this.renderList() }
            </div>
        )
    }
}
 
export default App;

App.js