标签：news doc boolean 修改 lse ons update hello 命名
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()
标签：news doc boolean 修改 lse ons update hello 命名
原文地址：https://www.cnblogs.com/lishixiang-007/p/11337451.html
