react（二）

react事件监听和处理

1.箭头函数的this指向

example：

class Demo extends Component {
    constructor() {
        super()
    }

    render() {
        return (
           '<p onClick={()=>this.hanldeClick()}><p>'
        )
    }
}

// rules
1.在jsx中，事件监听的属性是以驼峰式命名
2.在jsx中，事件监听this指向一个js函数

jsx中回调函数的this问题
<p onClick={this.hanldeClick}><p>
// 没有用箭头函数时 this =》 <p>

因为在jsx中，<p></p>会被编译为React.createElement,这样会丢失this作用域
解决方案1：在constructor中bind绑定组件的this
constructor() {
    ......
    this.handleClick.bind(this)
}
解决方案2：使用箭头函数保留组件this的作用域

受控组件

input中的value并不是他的value 而是通过输入值之后通过state 再赋值给value

./component/input.js

import React, {Component} from 'React'
export default class Input extends Component {
    constructor() {
        super()
        this.state = {
            value: ""
        }
    }
    handleInput(e) {
        if(e.target.value.length > 10) {
            return 
        }
        this.setState({
            value: e.target.value
        })
    }
    render() {
        return (
            <input type="text" onInput={(e)=>handleInput(e)} value={this.state.value} />
        )
    }
}

react组件的三个属性

this.state     组件的状态

this.props    组件接受的参数

this.context 组件接受的上下文  (redux就是基于这个)

rules： {
    state: 1.只能在组件的constructor中初始化
           2.只能使用setState方法更新
           3.setState会导致render重新执行，渲染组件和子组件
    props：1.
    context: 1.在主组件中设置context, 参数会自动传递
}

props使用 类里面

父组件：
render() {
    return(
        <Nav>
            <span>这是个导航</span>
        </Nav>
    )
}
子组件
constructor(props) {
    super(props)
}
render() {
    return(
        <div>{this.props.children}</div>
    )
}

父组件：
render() {
    return(
        <Nav title="这是个导航" />
    )
}
子组件
constructor(props) {
    super(props)
}
render() {
    return(
        <div>{this.props.title}</div>
    )
}

在函数里：

const Nav = function (props) { // 作为一个形参传入
    return (
        <div>
            {props.children}
            {props.title}
        </div>
    )
}

react的生命周期函数

react不是真正的DOM，而是会生成新的虚拟DOM，虚拟DOM会经历一个创新、跟新、删除的过程。

生命周期函数指某一个时刻组件会自动执行的函数

初始化：constructor中初始化 props和state

Mounting： 指的是组件第一次被挂载在组件的流程

Updating：组件更新的流程，数据(props或state)发生变化的时，页面的更新会被执行

    // 在组件即将被挂载（组件被第一次放到页面上的时候）到页面的时刻自动执行    
    componentWillMount() {        
        console.log("componentWillMount");    
    }    
    // 组件被挂载到页面之后，自动被执行    
    componentDidMount() {        
        console.log("componentDidMount")    
    }        
    // 组件更新之前，他会被自动执行，要求返回一个布尔的生命周期结果 返回true组件要被更新，
    // 返回false组件不需要被更新     
    shouldComponentUpdate() {        
        console.log("shouldComponentUpdate")        
        return true      
    }    
    // 组件被更新之前，他会被执行，在shouldComponentUpdate之后被执行    
    // 如果shouldComponentUpdate返回true才会被执行，返回false就不会被执行    
    componentWillUpdate() {        
        console.log("componentWillUpdate")    
    }    
    componentDidUpdate() {        
        console.log("componentDidUpdate")    
    }

// 当一个组件，从父组件接收参数， 只要父组件的render函数被重新执行了，子组件的生命周期就会被执行
// 如果这个组件第一次存在于父组件中，不会执行
// 如果这个组件之前已经存在于父组件中，才会执行
componentWillReceiveProps() {   
    console.log("child componentWillReceiveProps")
}

Unmounting：当这个组件即将被这个页面剔除的时候 会被执行

componentWillUnmount() {    
    console.log("child componentWillUnmount")
}

componentWillReceiveProps、componentWillUnmount都是子组件的生命周期函数

生命周期函数的使用场景

所有的生命周期函数都可以不存在 render生命周期函数必须有。