步入React正殿 - 认识State

目录

扩展学习资料

State常规知识点

安装React调试开发插件【react-devtools】

如何定义State

怎么样定义需要一个State

修改State

创建新的状态【state】

创建新的状态

State和Props区别

小结

练习

---

扩展学习资料

预习资料名称	链接	备注
React Dev Tools	react-devtools - npm	无
状态组件和无状态组件	17、Reac系列之--无状态组件你真的知道吗？ - 掘金	扩展阅读
setState异步的理解	setState异步、同步与进阶 - 掘金	无

State常规知识点

• 如何定义State
• 如何修改State
• State的不可变原则
• State和Props区别

安装React调试开发插件【react-devtools】

Element中选中Dom
Console中$0会输出选中的dom
react-devtools中选中
Console中$r会输出虚拟dom;$r.render()会输出组件实例

如何定义State

当一个变量涉及到UI了，就需要将其设置为State【组件UI状态变化值】

class ListItem extends Component {
  // 类的构造函数
  constructor(props) {
    super(props);
    // 定义State
    this.state = {
      count: 0,
      price: 99
    };
  }
}

怎么样定义需要一个State

• 是否通过props从父组件获取
• 是否可以通过其他state和props计算得到
• 是否在render方法中使用

不能在父组件获取，不能计算得到，UI交互，render中使用

修改State

• 使用setState
• setState是异步的
• State的更新是一个浅合并（shallow merge）的过程

handleDecrease() {
    console.log('step 1', this.state.count);
    this.setState({ 
// setState是异步的不是同步的，react会优化setState执行的时机，会多个同时执行
      count: this.state.count - 1,// 浅合并，改哪个变量，就传哪个变量
    }, ()=>{
        console.log('改变值后，执行的回调函数')    
        console.log('step 3', this.state.count);
    });
    console.log('step 2', this.state.count);
  }

创建新的状态【state】

创建新的状态

状态类型

• 值类型：数字，字符串，布尔值，null，undefined
• 数组类型
• 对象

1.状态的类型是值类型

// 1.状态的类型是值类型
this.setState({
    count: 99,
    name: '数字电视',
    show: true,
    num: null,
    name2: undefined
})

2.状态的类型是数组

// (1)、subArr = [].concat(arr); 
// w3c解释： arrayObject.concat(arrayX,arrayX,......,arrayX)
// 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。
// 如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。
// (2)、subArr = arr.slice(0); 
// w3c解释： arrayObject.slice(start,end)  slice接收两个参数
// 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
// (3)、filter：过滤，将数组中满足条件的元素组成一个新的数组返回；

// 2.状态的类型是数组
const _books = this.state.books.concat('new book') 
// 返回一个新数组，这个数组里面多了个'new book'的值
this.setState({
    books: _books
})
// 或
const _books2 = [...this.state.books, 'new book'] 
// ...结构符生成一个新的数组，这个数组里面多了个'new book'的值
this.setState({
    books: _books2
})

3.状态的类型是对象

// 方法一
item = {
    id: 1,
    name: 'Sony TV',
    price: 7000
}
//	Object.assign() 将this.state.item,{price:9000}
// 这两个对象赋值给目标对象{}，生成一个新的对象
// JSON.parse// 深拷贝时使用
const _item = Object.assign({},this.state.item,{price:9000})
this.setState({
    item: _item
})
// 方法二
const _item2 = {...this.state.item,price:9000)
this.setState({
    item: _item2
})
// 避免使用会直接修改原对象的方法，而是使用可以返回新对象的方法

immutable-js 这样的JS库可以方便的创建和管理不可变的数据

State和Props区别

State

• 可变的【组件保存，控制，修改自己可变的这么一个状态】
• 组件内部【组件内部初始化，可以组件自身修改，外部不能访问，不能修改】【局部，只能被组件自身控制的数据源】
• 交互或其他UI造成的数据更新【数据更新，通常会触发组件重新渲染】

Props

• 在组件内部不可变【组件内部无法控制，无法修改，除非外部组件重新传入新的props】
• 父组件传入【的一个参数对象，外部传来的配置参数】
• 简单的数据流【从上而下的简单数据流】

state ——可以通过props传入子组件——> props

state<——传入的props初始化state —— props

小结

• 定义State的判断
• 修改State值
• 如何创建新的状态
• State和props

练习

【题目1】 为什么要使用不可变数据更新state？

【题目2】 setState在什么情况下是异步的，在什么情况下是同步的？