zoukankan      html  css  js  c++  java
  • 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={{  '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:组件已经销毁,即这个组件不再存在时。

  • 相关阅读:
    ZOJ 1002 Fire Net
    Uva 12889 One-Two-Three
    URAL 1881 Long problem statement
    URAL 1880 Psych Up's Eigenvalues
    URAL 1877 Bicycle Codes
    URAL 1876 Centipede's Morning
    URAL 1873. GOV Chronicles
    Uva 839 Not so Mobile
    Uva 679 Dropping Balls
    An ac a day,keep wa away
  • 原文地址:https://www.cnblogs.com/yinwenjie/p/12238402.html
Copyright © 2011-2022 走看看