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>xxxx{props.xxx}</div>
}
或者采用箭头函数
let Box = props => <div>xxxx{props.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()