react补充

最新推荐文章于 2024-07-13 20:22:07 发布

goat-on-the-way

最新推荐文章于 2024-07-13 20:22:07 发布

阅读量615

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/sinat_41746597/article/details/121278611

版权

简写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:{'^前缀'}:''去掉多余的前缀})