react补充

  1. 简写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>
            )
        }
        
    }
    
  2. 批量传递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')
    )
    
  3. 对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 
    }
    
    
  4. 简写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 
        }
    }
    
    
  5. 函数式组件使用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')
    )
    
  6. 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>
            )
        }
    }
    
  7. 高阶函数
    1. 若A函数,接收的参数是一个函数,那么A就是一个高阶函数

    2. 若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>
            )
        }
    }
    
  8. 生命周期

    mount挂载

    unmount卸载

    //卸载某个组件
    ReactDOM.unmountComponentAtNode(
    	document.getElementById('id')
    )
    
    //组件挂载完毕
    componentDidMount(){
        
    }
    //初始化渲染、状态更新后
    render(){
        
    }
    //组件将要卸载
    componentWillUnmount(){
        
    }
    
    
    
  9. 跨域问题

    (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:{'^前缀'}:''去掉多余的前缀})
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值