React简单实用小知识点整理

一：React的生命周期

1.1 组件生命周期的三种状态展示：
- Mounting: 已插入了真是dom结构
- Updating: 正在被重新渲染
- Unmounting: 已移出了真实dom结构

1.2 关于 生命周期的处理函数（will表示进入状态之前调用，did表示进入状态之后调用）

componentWillMount()//组件将要渲染到真实dom节点；

componentDidMount()//组件已经渲染到真实dom节点；

componentWillUpdate()//state值发生变化，组件将要被重新渲染；

componentDidUpdate()//组件已经完成重新渲染；

componentWillUnmout()//卸载组件，比如跳转路由的时候

componentWillReceiveProps() //已经加载组件props发生改变的时候调用；

shouldComponentUpdate()//组件判断是否要重新渲染的时候调用；

1.3 关于组件生命周期的执行顺序 如下图所示：

二：查找dom节点操作（ref）

1 react中通过ref给dom节点加上一个名字，然后我们通过this.refs.ref名 来获取

eg:

render(){
 return (
        <div ref = "demo">this is a test</div>
    )
}

如上面代码所示我们在需要的获取这个div标签的时候就可以通过this.refs.demo来进行一系列的操作了，就和原生javascript中通过document.getElementById获取到的是一样的道理；

三： 受控表单组件

1.在受控表单组件中的value值都要与state属性进行绑定，并且需要通过onChange方法去改变值；
eg:

export default class Demo extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    testInput: ''
                }
            }

            handleInput = (e) => {
                let str = ''
                if(e.target.value.length >= 8){
                    str = e.target.value.splice(0,5) + '...'
                }
                this.setState({
                    testInput: str
                })
            }

            render(){
                return (
                    <div>
                        <input type="text" value={ this.state.testInput } onChange={ this.handleInput }>
                    </div>
                )
            }
        }

四： 关于属性校验

static: propTypes = {
     userName: React.PropTypes.bool.isRequired,//表示是必填项且是布尔类型
     passWord: React.PropTypes.number //表示必须是数值类型
}

更多关于属性校验的方法…

五： 关于props

组件中的props主要实现的是父组件向子组件传递数据

如下demo所示

DemoTest.js

import React,{Component} from 'react'
import Test from './Test.js'

export default class Demo extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    render(){
        return(
            <div>
                <Test wenzi="按钮"/>
                <div>内容</div>
            </div>
        )
    }
}

Test.js

import React,{Component} from 'react'

export default class Demo extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    render(){
        return(
            <input type="button" value={ this.props.wenzi }/>
        )
    }
}

Test组件就能够接收到DemoTest组件中传进去的wenzi值了

六： 子孙级别数据属性传递（context）

说明： 如果我们利用props也是可以实现这个效果的，但是那样的话，无疑比较麻烦，下方代码是通过context实现的

import React,{Component} from 'react'


class Child extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    static contextTypes = {
        wenzi: React.PropTypes.string
    }

    render(){
        return(
            <div>
                <input type="button" value={ this.context.wenzi }/>
            </div>
        )
    }
}

class Son extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    render(){
        return(
            <div>
                <Child />
            </div>
        )
    }
}


export default class Parent extends Component{
    constructor(props){
        super(props)
        this.state={

        }
    }

    getChildContext = () => {
        return{
            wenzi: '测试按钮'
        }
    }

    static childContextTypes = {
        wenzi: React.PropTypes.string
    }

    render(){
        return(
            <div>
                <Son />
            </div>
        )
    }
}

效果：