React组件安装使用和生命周期函数

React安装
在使用react时 需要安装 两个模块
react react-dom

初始化时 需要用到react-dom中的render方法

具体如下:
import ReactDOM from "react-dom"

ReactDOM.render(

test

,document.getElementById("app"),()=>{
console.log("应用初始化完毕")
})

或者
import {render} from "react-dom"

render(

test

,document.getElementById("app"),()=>{
console.log("应用初始化完毕")
})

定义组件(在react中 组件首字母必须大写)

简单组件:
let Box = function(props){
return

xxxx{props.xxx}

}
或者采用箭头函数
let Box = props =>

xxxx{props.xxx}

完整组件
import React from "react"
class Box extends React.Component{
render(){
return

}
}

值得注意的是 在定义组件时,组件的结构只能有一个顶层元素
如果dom结构比较复杂 需要多行时 最好用()将html结构括起来 例如:
return (

按钮

)

组件的状态: state
组件的数据模型均挂载在state上 可在构造函数内进行初始化

class Box extends React.Component{
constructor(){
this.state = {
username : "",
goodsList : []
}
}

render(){
return ....
}
}

在渲染函数中 获取组件状态: this.state.username

修改组件状态:
this.setState({
username : "new value"
})

绑定事件:
通过在事件名前面加on并且采用驼峰命名法例如:
btn
正常情况 无需也不能加() 否则 该函数在加载阶段就立即运行了 此时绑定到事件上的只是函数的返回值
还有一点需要注意: 将函数丢给click事件后 它的this不再指向当前组件
如果在函数体内涉及到this调用 记得赋值前绑好this指向 例如:
class Box extends React.Component{
constructor(){
this.sayHello = this.sayHello.bind(this)
this.state = {
name : "zhuiszhu"
}
}

sayHello(){
console.log(`hello ${this.state.name}`)
}

render(){
return
}
}

如果绑定函数时需要传参 则让函数的返回值为点击时需要执行的函数即可
例如:
{
constructor(){
this.state = {
name : "zhuiszhu"
}
}

sayHello(name){
return () => {
console.log(`hello ${name}`)
console.log(this.state.name)
}
}

render(){
return 打招呼
}
}

数据双向绑定
{
constructor(){
this.state = {
name :"zhuiszhu"
}

this.changename = this.changename.bind(this)
}

changename(e){
let value = e.target.value
this.setState({
name : value
})
}

render(){
return
}
}

如果无需用到数据双向绑定 可仅在提交时获取最新数据即可
例如:
{

sub(){
let data = {
username : this.refs.username.value,
password : this.refs.password.value,
password2 : this.refs.password2.value
}

//提交
}

render(){
return (

用户名:

密码:

重复密码:

)
}

}

组件的props: 用于接收由父级传递的数据

{this.props.xxx}

父级调用子组件传递props时

注意,如果你要传动态数据或者数字类型或者boolean类型 则需要采用如下写法
let yyy = "zhuiszhu"

props类型验证:
需要给当前组件(类)上添加上静态属性 propTypes
例如:
es5写法:
import PropType form "prop-types"

class Box extends React.Componnet{
....

}

Box.propTypes = {
propname : PropType.string,
propname1 : PropType.func.isRequired, //必填
...
}

es6写法
import PropType form "prop-types"

class Box extends React.Componnet{
....
static propTypes = {
propname : PropType.string,
propname1 : PropType.func.isRequired, //必填
...
}
}

组件的生命周期函数:

三大时期:

加载期 更新期 卸载期
默认 每个时期都有之前和之后 卸载期除外
更新期之前额外多出两个生命周期函数

之前都是will
之后都是did

加载是mount
更新时update
卸载unmount

其中允许更新是所有生命收起函数中唯一不以component为开头的生命周期函数
接收父级props之前的生命周期函数是唯一以四个单词组成的生命周期函数

加载前
componentWillMount()
加载后
componentDidMount()

组件之前接收props
componentWillReceiveProps(newProps)

允许组件更新
shouldComponentUpdate(newProps,newState)
更新前
componentWillUpdate(newProps,newState)
更新后
componentDidUpdate(oldProps,oldState)

卸载前
componentWillUnmount()