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

Posted 2022-07-02 lishixiang-007

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

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

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

ReactDOM.render(<div>test</div>,document.getElementById("app"),()=>
console.log("应用初始化完毕")
)

或者
import render from "react-dom"

render(<div>test</div>,document.getElementById("app"),()=>
console.log("应用初始化完毕")
)

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

简单组件:
let Box = function(props)
return <div>xxxxprops.xxx</div>

或者采用箭头函数
let Box = props => <div>xxxxprops.xxx</div>

完整组件
import React from "react"
class Box extends React.Component
render()
return <div></div>

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

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

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

render()
return ....

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

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

绑定事件:
通过在事件名前面加on并且采用驼峰命名法例如:
<a href="javascript:;" onClick=this.sayHello>btn</a>
正常情况 无需也不能加() 否则 该函数在加载阶段就立即运行了 此时绑定到事件上的只是函数的返回值
还有一点需要注意: 将函数丢给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 <a onClick=this.sayHello></a>

如果绑定函数时需要传参 则让函数的返回值为点击时需要执行的函数即可
例如:

constructor()
this.state =
name : "zhuiszhu"

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

render()
return <a onClick=this.sayHello(‘zhuiszhu‘) >打招呼</a>

数据双向绑定

constructor()
this.state =
name :"zhuiszhu"

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

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

render()
return <input value=this.state.name onChange=this.changename />

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


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

//提交

render()
return (<form onSubmit="this.sub.bind(this)">
<div>用户名: <input type="text" placeholder="请输入用户名" ref="username" /></div>
<div>密码: <input type="text" placeholder="请输入密码" ref="password" /></div>
<div>重复密码: <input type="text" placeholder="请重新输入密码" ref="password2" /></div>
<input type="submit" value="注册" />
</form>)

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

this.props.xxx

父级调用子组件传递props时

<Child xxx="123" />
注意,如果你要传动态数据或者数字类型或者boolean类型 则需要采用如下写法
let yyy = "zhuiszhu"
<Child xxx= yyy | 123 | false />

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()