-
简写state
class Test extends React.Component{
//原理：类中可以直接写赋值语句，其意义是给实例对象添加属性并赋值
//初始化状态
state = {name:'zhangsan',age:45}
//自定义方法
changeName=()=>{//使用箭头函数改变this指向，此处this指向实例对象
this.setState({name:'lisi'})
}
render(){
return (
<h1 onClick={this.changeName}>{name}-{age}</h1>
)
}
}
-
批量传递props,展开运算符的使用 …
class Person extends React.Component{
render(){
const {name,age} = this.props
return(
<ul>
<li>{name}</li>
<li>{age}</li>
</ul>
)
}
}
const p = {name:'zhangsan',age:18}
ReactDOM.render(
<Person {...p}></Person>,
document.getElementById('test')
)
-
对props传入的类型进行限制
会用到prop-type.js
class Person extends React.Component{//注意大小写
}
Person.propTypes = {//类型
name:PropTypes.string.required,
age:PropTypes.number,
speak:PropTypes.func,
//函数写func不写function
}
Person.defaultProps = {//默认值
sex:'未知',
age:0
}
-
简写props
//原理：类中可以直接写赋值语句，其意义是给实例对象添加属性并赋值
//static静态的使用
class Person extends React.Component{//注意大小写
static propTypes = {//类型
name:PropTypes.string.required,
age:PropTypes.number,
speak:PropTypes.func,
//函数写func不写function
}
static defaultProps = {//默认值
sex:'未知',
age:0
}
}
-
函数式组件使用props
function Person(props){
const {name,age} = props
return(
<ul>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
</ul>
)
}
Person.propTypes = {//类型
name:PropTypes.string.required,
age:PropTypes.number,
speak:PropTypes.func,
//函数写func不写function
}
Person.defaultProps = {//默认值
sex:'未知',
age:0
}
ReactDOM.render(
<Person name="zhangsan"></Person>,
document.getElementById('test')
)
-
refs的使用
组件内的标签可以定义ref作为标识
(1) string类型，可能效率低
class Demo extends React.Component{
show1 = ()=>{//此时input取到的是真实DOM的input标签
const {input1} = this.refs
alert(input1.value)
}
show2 = ()=>{//
const {input2} = this.refs
alter(input2.value)
}
render(){
return (
<div>
<input ref="input1"></input>
<button onClick={this.show1}></button>
<input ref="input2" onBlur={this.show2}></input>
</div>
)
}
}
(2) 回调函数（你自己定义的函数；你没调用；最终别人调用了）
内联函数会存在一些问题，更新过程中会执行两次，第一次为null，第二次为正确节点。影响不大
内联函数写法
show1 = ()=>{//此时input取到的是真实DOM的input标签
const {input1} = this
alert(input1.value)
}
<input ref={(e)=>{this.input = e}}></input>
//此时e指的是ref所在的标签
class绑定函数写法
show1 = (e)=>{//此时input取到的是真实DOM的input标签
this.input = e
const {input1} = this
alert(input1.value)
}
<input ref={this.show1}></input>
(3) createRef
调用后可以返回一个容器，可以存储被ref所标识的节点，该容器是“专人专用”，用几个就需要创建几个容器
class Demo extends React.Component{
myRef = React.createRef()
myRef2 = React.createRef()
show1 = ()=>{//此时input取到的是真实DOM的input标签
alert(this.myRef.current.value)
}
show2 = ()=>{//
const {input2} = this.refs
alter(this.myRef2.current.value)
}
render(){
return (
<div>
<input ref="input1"></input>
<button onClick={this.show1}></button>
<input ref="input2" onBlur={this.show2}></input>
</div>
)
}
}
-
高阶函数
-
若A函数，接收的参数是一个函数，那么A就是一个高阶函数
-
若A函数，调用的返回值依然是一个函数，那么A就是一个高阶函数
【函数的柯里化】通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
class Demo extends React.Component{
show1 = (type)=>{
return (event)=>{//此处代表标签
this.setState({[type]:event.target.value})//es6对象属性名表达式
}
}
render(){
return (
<div>
<input ref="input2" onChange={this.change('name')}></input>
<input ref="input2" onChange={this.change('password')}></input>
</div>
)
}
}
-
生命周期
mount挂载
unmount卸载
//卸载某个组件
ReactDOM.unmountComponentAtNode(
document.getElementById('id')
)
//组件挂载完毕
componentDidMount(){
}
//初始化渲染、状态更新后
render(){
}
//组件将要卸载
componentWillUnmount(){
}
-
跨域问题
（1）配置package.json（只能配一个代理地址）
从3000地址获取地址5000的内容，会现在在地址为3000的地方找所需信息，没有再去5000地址获取
http://localhost:3000
“proxy”:http://localhost:5000（目标地址）
（2）建立代理文件setupProxy.js(配置多个代理)
const proxy = require('http-proxy-middleware')
module.exports = function(app){
app.use(
proxy('/api',{//遇到请求前缀触发代理
target:'http://localhost:5000',//请求转发地址
changeOrigin:true,//控制服务器收到的响应头中host字段的值（HOST标志这次请求从哪发出）
pathRewrite:{'^/api':''}//重写请求路径，去掉多余的前缀
}),
proxy('/api2',{//遇到请求前缀触发代理
target:'http://localhost:5000',//请求转发地址
changeOrigin:true,//控制服务器收到的响应头中host字段的值（HOST标志这次请求从哪发出）
pathRewrite:{'^/api2':''}//重写请求路径，去掉多余的前缀
})
)
}
//proxy(前缀,{target目标地址，changeOrigin:true,pathRewrite:{'^前缀'}:''去掉多余的前缀})