React-2-基础知识

一、变量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 (
        <li key='good'>good</li>  // 循环生成的每个标签都必须有一个唯一的key,用来提高性能
    )
})

四、事件监听的实现

有三种绑定事件的方式

// 方式一:在构造函数中绑定this
construct(props){
    super(props)
    this.handleClick = this.handleClick.bind(this)
}
handleClick() {xxx}

// 方式二:绑定一个函数返回一个箭头函数
handleClick = () => {xxx}

// 方式三:并定一个箭头函数返回一个函数
handleClick(){xxx}
onClick={()=>handleClick()}

五、样式和属性编写

  • 行内样式写法
    <img style={{ width: '12', height: '12' }}>
  • 添加类名,由于class与react的关键字重叠,所以需要使用className
    <img className={styles.xxx}>
  • 添加属性
    <img src={'xxx'}>

六、双向数据绑定

construct(props){
    super(props)
    inputVal: "请输入input" 
}
handleChange = (e) => {
    this.setState({
        inputVal: e.target.value
    })
}
render() {
    return (
        <input type="text" value={this.state.inputVal} onChange={e => this.handleChange(e)}>  // e是事件对象
    )
}

七、react组件的生命周期

1.componentWillMount:组件将要挂载时,这个时候我们可以进行api的调用,获取数据,但是不能进行DOM操作。

2.componentDidMount:组件已经挂载,在render渲染后,此时可以进行DOM操作,对状态进行更新操作。

3. componentWillReceiveProps:父组件传递的属性有变化,可以在这里做相应的响应操作。

4.shouldComponentUpdate:组件是否需要更新,返回布尔值,如果是true才会走下面两个生命周期并更新组件,否则不更新。

5.componentWillUpdate:组件将要更新。

6.componentDidUpdate:组件已经更新。

7.componentWillUnmount:组件已经销毁,即这个组件不再存在时。

posted @ 2020-01-28 17:01  不可思议的猪  阅读(218)  评论(0编辑  收藏  举报