react学习第二天笔记

箭头函数

• 箭头函数基础知识
  • var fn=()=>333;执行函数fn()的结果是333;
  • var fn=(n,m)=>n+m;执行函数fn(2,3)的结果是5;
  • var fn=(n,m)=>(n+m);执行函数fn(2,3)的结果是5；
  • var fn=(n,m)=>{n+m};执行函数fn(2,3)的结果是undefined;因为大括号内没有设置return返回值；
  • var fn=(n,m)=>{ return n+m };执行函数fn(2,3)的结果是5；
• header.js文件中箭头函数创建类
  • 通过构造函数创建类

   class Header extends Component{
       render(){
           return(
               <div id="header">
                   <h1 className="container">我是头部</h1>
                   <p>我们都是好孩子2222dddd</p>
               </div>
           )
       }
   }
  

  • 函数表达式创建类：箭头函数格式：var fn=()=>();

   const Header=()=>(
       <div id="header">
           <h1 className="container">我是头部</h1>
           <p>我们都是好孩子dddd2222dddd</p>
       </div>
   );
  

  • 函数表达式创建类：箭头函数格式：var fn=()=>{return xx}

   const Header=()=>{
       return(
           <div id="header">
               <h1 className="container">我是头部</h1>
               <p>我们都是好孩子dddddfewew</p>
           </div>
       )
   };
  

解构赋值

• 在引入第三方模块时，可以利用解构赋值来提取属性
  • 正常情况下，引入react模块，类继承时，使用React.Component

   import React from "react";
   class Header extends React.Component{
       ....     
    }
  

  • 解构赋值

   import React,{Component} from "react";
   class Header extends Component{
       ....
    }
  

• 利用ReactDom将元素插入到html页面中，利用解构赋值
  • 正常情况下

   import ReactDom from "react-dom";
   ReactDom.render(<Index/>,document.getElementById("app"));
  

  • 解构赋值

   import ReactDom,{render} from "react-dom";
   render(<Index/>,document.getElementById("app"))
  

react中组件数据的改变

• 组件自身数据的改变
  • 通过给构造函数设置私有属性state,然后通过this.setState({}),来进行改变；
  • 设置私有属性时：this.state={xxx:xxx}
  • 更新状态时：this.setState({xxx:xxx})

   class Header extends React.Component{
       constructor(){
           super();
           //设置初始状态；
           this.state={
               login:false
           }
       }
       //render为一个函数，类原型上的公有属性方法；
       render(){
           //登录之后，显示欢迎谁；没登录，显示先登录；
           let str="";
           if(this.state.login){
               str="欢迎你，guobin";
           }else{
               str="没登录，先登录"
           }
           setTimeout(()=>{
               //利用定时器，重新设置state；保证this为实例；
               this.setState({
                   login:true
               })
           },3000);
           return (
               <div id="header">
                   <h1>{str}</h1>
               </div>
           )
       }
   }
   export default Header;
  

• 组件间：父级给子级传递数据
  • 父级通过自定义标签设置自定义属性xxx；来设置数据内容；
  • 子级通过props来获取传递的数据内容；
    • 自定义标签为构造函数创建，则用this.props.xxx来获取传递过来的数据；

     //通过构造函数来创建函数，利用继承创建；通过this.props.xxx来获取父级给子级传的数据；
     class Header extends Component{
         render(){
             return(
                 <div id="header">
                     <h1 className="container">我是头部111 {this.props.context}</h1>
                     <p>我们都是好孩子2222dddd</p>
                 </div>
             )
         }
     }
    

    • 自定义标签通过函数表达式创建，则需要设置形参，然后通过形参获取；

     //通过函数表达式来创建函数；利用大括号和return返回值，通过设置形参，通过“形参.xxx”来获取父子给子级传的数据；
     const Header=(props)=>{
         return(
             <div id="header">
                 <h1 className="container">我是头部{props.context}</h1>
             </div>
         )
     };
     //可以使用箭头函数创建类；小括号直接返回值，无需设置return;
     /*const Header=(props)=>(
         <div id="header">
             <h1 className="container">我是头部{props.context}</h1>
         </div>
     );*/
    

• 组件间：子级给父级传递数据
  • 父级在构造函数中创建一个公共方法update(){xxx};
  • 在父级标签中给子级标签设置属性，用于传递给子级；将update函数的函数体传递给子级；
  • 注意：通过bind函数，来保证在传递给子级时，改变this指向为当前实例，确保，无论子级怎么调用，里面的this都是实例；
  • 子级通过props接收到父级传的函数体，然后调用执行；
  • 在以下例子中，子级中添加事件，事件触发后调用执行update函数，然后再函数中通过事件对象e来获取事件源标签，进而拿到Range的value值，通过state改变自身的状态；进而达到数据改变的效果；
  • 注意：es6中事件写成驼峰式写法，如onClick,onChange;
  • 代码：
    • Footer.js代码

     import React from "react";
     
     import "./footer.css";
     class Footer extends React.Component{
         render(){
             return(
                 <div id="footer">
                     <h2>我是底部</h2>
                     <input type="range" max="100" min="10" onChange={this.props.updates}/>
                 </div>
             )
         }
     }
     export default Footer;
    

    • index.js代码

     import React from "react";
     import ReactDom,{render} from "react-dom";
     
     //引入自定义模块；
     import Header from "./component/header/header";
     import Footer from "./component/footer/footer"
     import "./css/index.css";
     
     class Index extends React.Component{
         constructor(){
             super();
             this.state={
                 a:0
             }
         }
         //原型上的公共方法
         update(e){
             this.setState({
                 a:e.target.value
             })
         }
         render(){
             return(
                 <div>
                     {/*父级给子级传数据，通过设置自定义属性*/}
                     <Header context="美好的一天"/>
                     <Footer updates={this.update.bind(this)}/>{this.state.a}
                 </div>
             )
         }
     }
     render(<Index/>,document.getElementById("app"));
    
    

refs

• 定义：作为this实例的属性，通过refs能获取一个对象，根据设置在标签上的ref值，作为属性，拿到属性值，属性值为设置的标签元素，可以是自定义的标签组件，也可以是标签元素；
  • 以下代码中通过refs来获取不同的标签元素

    update(){
       //获取h1标签
       var H1=this.refs.one;
       //获取自定义标签Range
       var Ran=this.refs.two;
    }
    render(){
       return(
           <div>
               <h1 ref="one">这是标题</h1>
               <Range ref="two" updates={this.update}/>
           </div>
       )
   }
  

  • 注意：refs获取的标签为组件，不能获取组件中的DOM节点；
• ReactDOM中存在属性findDOMNode,用来获取自定义标签组件中的容器节点；
  • 通过解构赋值将findDOMNode属性从ReactDOM中解构出来；如：import ReactDom,{render,findDOMNode} from "react-dom";
  • 注意：组件若由多个元素组成，会拿到外面的父级节点；

   //以下节点中，通过findDomNode拿到的DOM节点为：<div id="footer">..</div>
   class Footer extends React.Component{
       render(){
           return(
               <div id="footer">
                   <h2>我是底部</h2>
                   <input type="range" max="100" min="10" id="ran" onChange={this.props.updates}/>
               </div>
           )
       }
   }
  

• 实例：滑动不同的滑块，使对应的值显示在后面
  • 注意：组件Range中组成元素只能有一个input元素，这样在通过findDomNode才能拿到它；
  • 代码：
    • Range.js代码：

     import React,{Component} from "react";
     class Range extends Component{
         render(){
             return(
                 <input type="range" min="0" max="100" defaultValue="0" onChange={this.props.updates}/>
             )
         }
     }
     export default Range;
    

    • index.js代码：

     import React from "react";
     import ReactDom,{render,findDOMNode} from "react-dom";
     
     //引入自定义模块；
     import Header from "./component/header/header";
     import Footer from "./component/footer/footer"
     import Range from "./component/Range";
     import "./css/index.css";
     
     class Index extends React.Component{
         constructor(){
             super();
             this.state={
                 a:0,
                 b:0,
                 c:0
             }
         }
         //原型上的公共方法，利用箭头函数，保证函数体内的this为实例；与bind效果相同；
         update=()=>{
             //this.refs.one拿到的是自定义标签Range，通过findDomNode拿到组成自定义标签的DOM节点；即input标签；通过value拿到实时值；
             this.setState({
                 a:findDOMNode(this.refs.one).value,
                 b:findDOMNode(this.refs.two).value,
                 c:findDOMNode(this.refs.three).value
             })
         };
         render(){
             return(
                 <div>
                     {/*父级给子级传数据，通过设置自定义属性*/}
                     <Header context="美好的一天"/>
                     <Range ref="one" updates={this.update}/>{this.state.a}
                     <Range ref="two" updates={this.update}/>{this.state.b}
                     <Range ref="three" updates={this.update}/>{this.state.c}
                 </div>
             )
         }
     }
     render(<Index/>,document.getElementById("app"));
    
    

子组件设置父组件传递数据的类型和默认值

• 在子组件中设置父组件传给子组件的数据类型和默认值
  • 必须下载模块：prop-types，如：import propTypes from "prop-types";
  • 子组件引入模块；
  • 设置数据类型：通过Footer.propTypes={xxx:xxx}

   Footer.propTypes={
       context:propTypes.string,
       age:propTypes.number.isRequired
   };
  

  • 设置数据默认值：通过Footer.defaultProps={xxx:xxx}

   Footer.defaultProps={
       age:16
   };
  

子组件获取父组件传递的节点数据

• 父组件中设置子组件的节点数据，在子组件中如何获取
  • 子组件通过this.props.children来获取父组件设置的节点数据
  • 获取的数据为一个数组，数组中的每一项为一个对象，即每个标签节点对象；
  • 实例对象上存在一个props属性，属性值为一个对象，对象中存在一个children属性，属性值为一个数组，数组中每一项为子节点标签对象，这些子节点标签对象也作为一个对象，存在props属性，属性值为对象，对象中存在children属性，属性值为数组，数组中包含子节点；直至为文本节点；
  • 注意：将Index标签插入到页面中，Index中设置的List标签下的标签元素，不会呈现在页面中，页面中呈现的元素取决于List自身return设置的元素，此例子是通过this.props.children拿到Index设置在List标签下的元素对象；然后作为自己的设置；

   import React,{Component,Children} from "react";
   import ReactDom,{render} from "react-dom";
   
   import "./css/index.css";
   //父级组件Index
   class Index extends Component{
       constructor(){
           super();
       }
       render(){
           return(
               <List>
                   <h1>这是大标题</h1>
                   <p>
                       <span>ddd11</span>
                       <span>eee</span>
                   </p>
                   <span>这是小图标</span>
               </List>
           )
       }
   }
   //子级组件List
   class List extends Component{
       render(){
           //获取文本eee
           console.log(this.props.children[1].props.children[1].props.children);
           return(
               this.props.children
           )
       }
   }
   render(<Index/>,document.getElementById("app"));
  

• 获取的节点数据为一个数组，遍历此数组，React身上存在一个Children属性，可以与map配合遍历数组；
  • 从React身上解构Children属性；如：import React,{Children} from "react"
  • 配合map遍历数组，匿名函数中获取的item参数为数组中每一个子节点标签对象；

   import React,{Component,Children} from "react";
   class List extends Component{
       render(){
           //this.props.children拿到的是一个数组，是实例List下的子节点对象组成的数组；
           //利用React中的Children属性，调用map方法来遍历此数组，获取每个节点对象
           let ListChilds=Children.map(this.props.children,(item)=>{
               //item就是拿到的每个标签对象；通过箭头函数，保证this为实例
               //返回值为li标签，标签内的内容为节点对象下的子节点；可以是文本节点，也可以是两个子节点对象；
               return (
                   <li>{item.props.children}</li>
               )
           });
           return(
               ListChilds
           )
       }
   }
  

类继承React.Component得到的类，创建实例的属性解析

• 实例的属性：主要有3个
  • state:自身状态的设置；设置在constructor中，作为私有属性;属性值为一个对象；
    • 设置：constructor中设置；

     constructor(){
         super();
         this.state={
             a:0,
             b:1
         };
     }
    

    • 更改：this.setState({a:5})
    • 获取：this.state.a;
  • props:与父级的联系，用于获取父级传给自己的数据；属性值为一个对象；
    • 父级设置数据两类：
      • 一类是：在自己标签上设置自定义属性xxx，这样在自己的props的属性值对象中就存在一个xxx属性名，属性值为父级设置的自定义属性值；
      • 二类是：在自己标签下设置子节点标签，这样在props对象中会存在一个children属性名，属性值为一个数组，数组中的每一项为设置的子节点标签对象；
      • 如下代码中：父级Index给子级List设置了自定义属性和子节点标签，获取的props属性值对象中，就存在三个属性，age,bontext,children;注意：ref属性不算自定义属性；

       class Index extends Component{
           constructor(){
               super();
           }
           render(){
               return(
                   <List ref="one" bontext="美好的" age={8}>
                       <h1 onClick={this.update.bind(this)}>这是大标题</h1>
                       <p>
                           <span>ddd11</span>
                           <span>eee</span>
                       </p>
                       <span>这是小图标</span>
                   </List>
               )
           }
       }
      

  • refs:与子级的联系，用于获取设置在自己的子级身上设置ref值，属性值为一个对象；
    • 自身作为父级组件，来设置自己的子级组件，在子级标签上设置ref值，这样自身实例上就存在refs属性，属性值为一个对象，对象中就存在多个属性；
    • refs属性值，只针对于自身属性，不是子级属性；
    • 注意：在页面render渲染后，直接打印实力this，是可以看到refs属性不为空对象，对象中存在对应的属性，但是页面刚一刷新，打印的refs为空对象，只有在页面刷新后，在执行对应的函数，才能拿到refs中的属性；
    • 以下代码中：当页面一刷新，拿到的refs为空对象，只有当点击事件发生后，调用执行update函数，才能拿到refs对应的数据；注意：在子级List实例中不存在父级Index的refs值；

    class Index extends Component{
        constructor(){
            super();
        }
        update(){
            //页面刚渲染时，执行此函数，打印的内容为一个空对象；
            //当点击事件发生后，打印的内容才能为一个对象，对象中存在one属性；
            console.log(this.refs)
        }
        render(){
            //实例对象中存在refs属性，属性值为一个对象，对象中的属性名为给子组件设置的ref值，属性值为对应的标签对象；
            this.update();//执行函数后，打印的内容为空；
            console.log(111);//渲染页面只渲染一次，点击事件发生后不会走此代码；
            return(
                <List ref="one" bontext="美好的" age={8}>
                    <h1 onClick={this.update.bind(this)}>这是大标题</h1>
                    <p>
                        <span>ddd11</span>
                        <span>eee</span>
                    </p>
                    <span>这是小图标</span>
                </List>
            )
        }
    }
    

• 例子：Index为父级组件，List为子级组件
  • 代码：

   //引入模块，结构赋值
   import React,{Component,Children} from "react";
   import ReactDom,{render} from "react-dom";
   
   //父级组件Index
   class Index extends Component{
       constructor(){
           super();
       }
       update(){
           //页面刚渲染时，执行此函数，打印的内容为一个空对象；
           //当点击事件发生后，打印的内容才能为一个对象，对象中存在one属性；
           console.log(this.refs)
       }
       render(){
           //实例对象中存在refs属性，属性值为一个对象，对象中的属性名为给子组件设置的ref值，属性值为对应的标签对象；
           this.update();//执行函数后，打印的内容为空；
           console.log(111);//渲染页面只渲染一次，点击事件发生后不会走此代码；
           return(
               <List ref="one" bontext="美好的" age={8}>
                   <h1 onClick={this.update.bind(this)}>这是大标题</h1>
                   <p>
                       <span>ddd11</span>
                       <span>eee</span>
                   </p>
                   <span>这是小图标</span>
               </List>
           )
       }
   }
   //子级组件List
   class List extends Component{
       constructor(){
           super();
           this.state={
               a:0,
               b:1
           };
       }
       render(){
           console.log(this);
           return(
               <div>
                   {this.props.children}
                   <h1>我们</h1>
               </div>
           )
       }
   }
   render(<Index/>,document.getElementById("app"));
  

  • 浏览器控制台：打印List实例的结构

    
    List实例结构图

react生命周期

• 生命周期
  • 定义：页面开始加载到页面渲染显示，之间不同阶段发生不同事；
  • 勾子函数：可有可无，不设置，不会影响页面正常加载，为了在页面不同阶段操作不同的事情；
  • 开发过程中，都会在componentWillMount函数中获取数据，然后再render渲染到页面上；
  • 以下代码运行顺序：
    • 页面加载：componentWillMount -> render -> componentDidMount -> 页面显示
    • 更新数据：点击事件触发 -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate -> 页面更新；
  • 代码：

   //引入模块，结构赋值
   import React,{Component,Children} from "react";
   import ReactDom,{render} from "react-dom";
   
   class Index extends Component{
       constructor(props){
           //getDefaultProps
           super(props);
           //getInitialState
           this.state={
               a:"meihao",
               destory:false
           }
       }
       //开始加载
       componentWillMount(){
           alert("componentWillMount");
       }
       //加载完成
       componentDidMount(){
           alert("componentDidMount");
       }
       //更新state数据
       change=()=>{
           this.setState({
               a:"哈喽"
           })
       };
       //是否更新组件
       shouldComponentUpdate(){
           alert("shouldComponentUpdate");
           return true;//必须设置为true，才会更新，否则，不会更新数据；
       }
       //开始更新
       componentWillUpdate(){
           alert("componentWillUpdate")
       }
       //更新完毕
       componentDidUpdate(){
           alert("componentDidUpdate");
       }
       destory=()=>{
           alert("ddd")
           this.setState({
               destory:true
           })
       };
       //开始销毁
       componentWillUnmount(){
           alert("componentWillUnmount")
       }
       //渲染页面
       render(){
           if(this.state.destory){
               return null;
           }
           alert("render");
           return(
               <div>
                   <h1>这是标题</h1>
                   <p>这是内容:{this.state.a}</p><br/>
                   <span onClick={this.change}>更新</span><br/>
                   <span onClick={this.destory}>销毁</span>
               </div>
           )
       }
   }
   render(<Index/>,document.getElementById("app"));
   
  

• react生命周期图

  
  react生命周期图

知识点

• 父级给子级传递数据时，子级中添加事件触发函数体执行，父级传值时，通过bind保证this执行为实例，也可以通过箭头函数，设置类函数中的公共方法；
  • bind设置：在父级给子级传数据时，通过bind()保证this为实例，如："updates={this.update.bind(this)}"

   class Index extends React.Component{
       constructor(){
           super();
           this.state={
               a:0,
               b:0,
               c:0
           }
       }
       //原型上的公共方法
       update(){
           //this.refs.one拿到的是自定义标签Range，通过findDomNode拿到组成自定义标签的DOM节点；即input标签；通过value拿到实时值；
           this.setState({
               a:findDOMNode(this.refs.one).value,
               b:findDOMNode(this.refs.two).value,
               c:findDOMNode(this.refs.three).value
           })
       };
       render(){
           return(
               <div>
                   {/*父级给子级传数据，通过设置自定义属性*/}
                   <Header context="美好的一天"/>
                   <Range ref="one" updates={this.update.bind(this)}/>{this.state.a}
                   <Range ref="two" updates={this.update.bind(this)}/>{this.state.b}
                   <Range ref="three" updates={this.update.bind(this)}/>{this.state.c}
               </div>
           )
       }
   }
  

  • 箭头函数设置：在父级给子级传数据时，直接传函数体,如："updates={this.update}"

   class Index extends React.Component{
       constructor(){
           super();
           this.state={
               a:0,
               b:0,
               c:0
           }
       }
       //原型上的公共方法，利用箭头函数，保证函数体内的this为实例；与bind效果相同；
       update=()=>{
           //this.refs.one拿到的是自定义标签Range，通过findDomNode拿到组成自定义标签的DOM节点；即input标签；通过value拿到实时值；
           this.setState({
               a:findDOMNode(this.refs.one).value,
               b:findDOMNode(this.refs.two).value,
               c:findDOMNode(this.refs.three).value
           })
       };
       render(){
           return(
               <div>
                   {/*父级给子级传数据，通过设置自定义属性*/}
                   <Header context="美好的一天"/>
                   <Range ref="one" updates={this.update}/>{this.state.a}
                   <Range ref="two" updates={this.update}/>{this.state.b}
                   <Range ref="three" updates={this.update}/>{this.state.c}
               </div>
           )
       }
   }
  

• 注意：
  • return()中如果存在两个标签，必须放在一个div容器中，不能放两个标签；
  • 父级设置子级自定义属性时，设置属性值为数字类型，用{}赋值；如：age={5};