2021-07-25

React学习（第四天）

1.复习展开运算符

let arr1 = [1,3,5,7,9] 
    let arr2 = [2,4,6,8,10]
    console.log(...arr1)//展开一个数组
    console.log(...arr2)
    
    let arr3 = [...arr1,...arr2] //连接数组
    console.log(...arr3) //...展开运算符

    //在函数中使用
    function sum(...number){
        return number.reduce((preValue,currentValue)=>{
            return preValue+currentValue
        })//reduce累加

    }
    console.log(sum(1,2,3,4,5))

    let Person = {name:"tom",age=18}
    let Person2 = {...Person}
    console.log(Person2)

2. prop总结
理解：
（1）每个组件对象都会有props属性
（2）组件标签的所有属性都保存在props中
作用：
（1）通过标签属性从组件外向组件内传递变化的数据
（2）注意：组件内部不要修改props数据
编码操作：
（1）内部读取某个属性

this.props.name

（2）对props中的属性值进行限制（需要引入prop-types库）

Person.propTypes{
 name:PropTypes.string.isRequired, //限制name为必传，且为字符串
        sex:PropTypes.string,   //限制sex为字符串
        age:PropTypes.number,   //限制年龄为数字
        speak:PropTypes.func    //限制speak为函数
}

（3）对props中属性值设置默认值

  Person.defaultProps = {
        sex:"性别未设置",//设置sex默认值
        age:18          //设置age默认值
    }

（4）扩展属性

<Person {...person}  />

（5）组件类的构造函数

constructor(props){
super(props)
console.log(props)//打印所有属性
}

6.字符串形式ref(最老的ref，不推荐使用，存在效率问题，现在推荐使用创建ref的方式是React.creatRef())

class Demo extends React.Component{
        //展示输入框左边的数据
        showData = ()=>{
            const {input1} = this.refs
            alert(input1.value)
        }
        //展示输入框右边的数据
        showData2 = () =>{
            const {input2} = this.refs
            alert(input2.value)
        }
        render(){
            return(
                <div>
                    <input ref='input1' type="text" placeholder="点击按钮提示数据" />
                    <button onClick={this.showData}>点我提示左侧的数据</button>
                    <input ref='input2' onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                </div>
            )
        }
    }

    ReactDOM.render(<Demo />,document.getElementById('test'))

7.回调函数形式的ref

class Demo extends React.Component{
        //展示输入框左边的数据
        showData = ()=>{
            const {input1} = this
            alert(input1.value)
        }
        //展示输入框右边的数据
        showData2 = () =>{
            const {input2} = this
            alert(input2.value)
        }
        render(){
            return(
                <div>
                    <input ref={(currentNode)=>{this.input1=currentNode}} type="text" placeholder="点击按钮提示数据" />
                    <button onClick={this.showData}>点我提示左侧的数据</button>
                    <input ref={currentNode=>this.input2=currentNode} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />						//回调函数满足的三个特点：
                    	//1.定义的函数  2.自己没有调用 
                    	//3.定义的函数自己没调用被其他地方调用
                </div>
            )
        }
    }

    ReactDOM.render(<Demo />,document.getElementById('test'))

8.回归函数的调用次数

class Demo extends React.Component{

        state = {isHot:false}
        //展示输入框左边的数据
        showData = ()=>{
            const {input1} = this
            alert(input1.value)
        }
        //展示输入框右边的数据
        showData2 = () =>{
            const {input2} = this
            alert(input2.value)
        }
        changeWeather = () =>{
            //获取原来的状态
            const {isHot} = this.state
            //更新状态
            this.setState({isHot:!isHot})
        }
        render(){
            const {isHot} = this.state
            return(
                <div>
                    <h2>今天天气很{isHot ? '炎热' : '凉爽'}</h2>
                    <input ref={(currentNode)=>{this.input1=currentNode}} type="text" placeholder="点击按钮提示数据" />
                    <button onClick={this.changeWeather}>点我切换天气</button>
                    <button onClick={this.showData}>点我提示左侧的数据</button>
                    <input ref={currentNode=>this.input2=currentNode} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                </div>
            )
        }
    }

    ReactDOM.render(<Demo />,document.getElementById('test'))

9.createRef使用

myRef = React.createRef()
        myRef2 = React.createRef()
        /*
            React.createRef调用后返回一个容器，该容器可以存储被ref标识的节点,
            该容器是专人专用的
        */
        //展示输入框左边的数据
        showData = ()=>{
            alert(this.myRef.current.value)
        }
        //展示输入框右边的数据
        showData2 = () =>{
          alert(this.myRef2.current.value)
        }
        render(){
            return(
                <div>
                    <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
                    <button onClick={this.showData}>点我提示左侧的数据</button>
                    <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                </div>
            )
        }
    }

    ReactDOM.render(<Demo />,document.getElementById('test'))

10.事件处理

class Demo extends React.Component{

        /*
            (1)通过onXxx属性指定事件处理函数(注意大小写)
             a.React使用的是自定义事件，而不是原生的DOM事件 ------为了更好的兼容性
             b.React中的事件是通过事件委托方式处理(委托给组件最外层的元素)-----为了高效
            (2)通过原生的event.target得到发生事件的DOM元素对象 ------不要过度使用ref
        */
        //创建ref容器
        myRef = React.createRef()
        showData = ()=>{
            alert(this.myRef.current.value)
        }

        //展示输入框右边的数据
        showData2 = (event) =>{
          alert(event.target.value)
        }

        render(){
            return(
                <div>
                    <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
                    <button onClick={this.showData}>点我提示左侧的数据</button>
                    <input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                </div>
            )
        }
    }

    ReactDOM.render(<Demo />,document.getElementById('test'))
    
    </script>