React-2-基础知识

Posted 2020-11-26 yinwenjie

一、变量state和变量修改setState

state修改后，页面也会跟着响应，更新state需要使用setState。

// 初始化state
this.state = {
    count: 0
}
// 更新state
this.setState({
    count: this.state.count + 1
})

注意：

1.setState是异步的，同一个生命周期里会批量操作更新state，这会导致一个问题，在某个生命阶段，我们setState了某个值，但是在这个阶段我们再去获取到的其实还是原本的值，只有在生命周期结束后才会真正更新完成。解决办法：setState可以传入第二个参数，传入一个回调函数可以获取到最新的state：

componentDidMount() {
    this.setState({
        count: 1
    }, () => {
        console.log(this.state.count)  // 这里是更新后的
    })
    console.log(this.state.count)  // 这里是更新前的
}

2.当修改的state依赖于上一次修改的state时，可以使用一下方法：

componentDidMount(){
    this.setState((prevState, prevProps) => {
        return {count: prevState.count + 1}
    })
}
// 当return前不需要其他操作时，可以简写
componentDidMount(){
    this.setState((prevState, prevProps) => (
        { count: prevState.count+1 } 
    ))
}

二、props属性传递

在父组件中给子组件传一个参数，就可以通过子组件的this.props.xxx接收这个值

// 父组件中
<Son title="abc"></Son>

// 子组件
this.props.title  // 直接获取

三、条件渲染和数据循环

1.条件渲染

一般使用三目表达式判断条件：

let result = this.state.count ? 1 : 0  // 如果this.state.count，则result为1，否则为0

注意：如果想让某个东西在页面上显示，并且在一段时间后消失，可以在构造函数里设置一个定时器，将某个原本为true的属性在一段时间后设置为false即可。

2.数据循环

数据循环一般使用map：

this.state = {
    goods: [1, 2, 3]
}
this.state.goods.map(good => {
    return good + 1
})