react学习笔记03

组件的状态提升
shouldComponentUpdate 组件应该更新吗？这个生命周期函数写的时候应该return一个 true/false
注意写事件的时候需要带上用箭头函数例如 onClick={()=>this.func1()} eg:

  <button onClick = {()=>this.forceUpdate()}>forceUpdate 组件强制更新</button>

默认更新进行的流程

constructor 
 组件将要加载 componentWillMount
 render
 组件已经加载 componentDidMount

this.setState({}) 主动更新进行的过程
组件是否应该更新 shouldComponentUpdate
组件将要更新 componentWillUpdate
render
组件更新完毕 componentDidUpdate

this.forceUpdate() 强制更新进行的过程
constructor
组件将要加载 componentWillMount
render
组件已经加载 componentDidMount

一般来说只会在constructor里面做一些 state初始化，不会写其他东西，由于constructor和componentWillMount
基本同时出现，做处理正常会写在componentWillMount里面，

ajax请求正常写在 componentWillMount 或者 componentWillUpdate 里面

shouldComponentUpdate 返回false时候就不往下执行

17版本 react getDerivedStateFromProps

   static defaultProps = {
    title : '这个是默认标题'
  }

通过 {this.props.title} 能获取到值

类型检查通过 prop-types
npm install prop-types --d
import PropTypes from ‘prop-types’

static propTypes = {
title : PropTypes.string // 规定是string类型
}

写一个方法的时候调用问题不加括号 run
这种写法需要绑定当前组件的this 然后在getUserInfo 函数里才能获取到值，否则会报错undefined
方法1 在调用这个函数的时候把绑定当前组件的this
<button onClick = {this.getUserInfo.bind(this )}>getUserInfo
方法2 在constructor里面初始化的时候把当前组件的this绑定到这个函数里面去
constructor(props){
super(props)

        this.state = {
            name :'demo',
            userInfo : {
                sex:'f',
                num:'33333'
            }
    }

    this.getMessage = this.getMessage.bind(this) 
}

方法3 在写这个函数的时候把使用箭头函数，箭头函数会把组件里面的this指向绑定到函数里面去

getNum = ()=>{
alert(this.state.userInfo.num)

}

如果要想给一个方法传递参数应该怎么写呢？
注意在调用这个函数的时候，需要.bind(this,‘。。。。’)然后才能传递值，如果直接写

this.setName('....')直接报错
    setName = (str)=>{
        this.setState({
            name:str
        })
    }

<button onClick = {this.setName.bind(this,‘womenyiqi’)}>setState设置一个变量的值

传递多个参数的话

   setName = (str,str2)=>{
        this.setState({
            name:str,
            name2:str2
        })
    }

<button onClick = {this.setName.bind(this,‘womenyiqi’,‘miaomiao’)}>setState设置一个变量的值

猜你喜欢