zoukankan      html  css  js  c++  java
  • react 学习笔记第三次课


    react 第三次课

    props 属性
    state 状态 是可以被改变的
    (私有的,不可以通过外部访问和修改,在组件内部修改,导致组件会重新render)

    ----------------------------------------------------------

    感觉挺简单的

    props 属性(传参 取值 父传给子)


    ----------------------------------------------------------

    state 状态

    class HelloMessage extends React.Component{
    /*组件内部*/
    /*状态内部写 下面用了这个name*/
    static defaultProps = {
    name:'12345'
    }
    render(){
    return <h1>hello,{this.props.name}</h1>
    }
    };

    ----------------------------------------------------------


    props.children

    获取子节点的东西,可以用来遍历

    <!DOCTYPE html>
    <html>
    <head>
    <title>props.children</title>
    <meta charset="UTF-8" />
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>
    <style>

    </style>
    </head>
    <body>
    <div id="example"></div>
    <script type="text/babel">
    class HelloMessage extends React.Component{
    render(){
    console.log(this.props.children)
    return (
    <ul>
    {
    this.props.children.map(function(item,index){
    return <li key={index}>hello,{item}</li>
    })
    }
    </ul>
    );
    }
    };
    const data = {
    address:'wuhan',
    obj:{
    name:'sonia'
    }
    };

    ReactDOM.render(
    <HelloMessage>
    <span>a</span>
    <span>b</span>
    <span>c</span>
    </HelloMessage>,
    document.getElementById('example')
    );
    </script>
    </body>
    </html>

    ----------------------------------------------------------

    class嵌套


    <!-- super(props); 子类调用父类构造器 Component(props)
    constructor 构造函数
    super()关键字 父类/子类继承的一种方式
    -->


    ----------------------------------------------------------

    <!DOCTYPE html>
    <html>
      <head>
        <title>component</title>
        <meta charset="UTF-8" />
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="node_modules/babel-standalone/babel.min.js"></script>
        <style>
    
        </style>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
         class HelloMessage extends React.Component{
            /*组件内部*/
           static defaultProps = {
             name:'12345'
           }
           render(){
             return <h1>hello,{this.props.name}</h1>
           }
         };
         const data = {
           address:'wuhan',
           obj:{
             name:'sonia'
           }
         };
         /*组件外部*/
           HelloMessage.defaultProps = {
             name:'abcabc'
           }
          
          ReactDOM.render(
            <HelloMessage name="lili"/>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    

      

    <!DOCTYPE html>
    <html>
      <head>
        <title>component--组合(嵌套)</title>
        <meta charset="UTF-8" />
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="node_modules/babel-standalone/babel.min.js"></script>
        <style>
    
        </style>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
         const comment = {
            date: new Date(),
            text: 'I hope you enjoy learning React!',
            author: {
              name: 'Hello Kitty',
              avatarUrl: 'http://placekitten.com/g/64/64'
            }
          };
          function formatDate(d){ 
            return d.toLocaleDateString();
          };
          /*img*/
          function Img(props){
            return <img src={props.infoSrc.avatarUrl}/>
          }
          /*author*/
          function Author(props){
            return(
              <div>
                <Img infoSrc={props.info}/>
                <p>{props.info.name}</p>
              </div>
            )
          };
          function Comment(props){
            return(
              <div className="list1">
                <Author info={props.author}/>
                <div>{props.text}</div>
                <div>{formatDate(props.date)}</div>
              </div>
            )
          };
         
    
          ReactDOM.render(
            <Comment 
              date={comment.date}
              text={comment.text}
              author={comment.author}/>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    

      

    <!DOCTYPE html>
    <html>
      <head>
        <title>props.children</title>
        <meta charset="UTF-8" />
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="node_modules/babel-standalone/babel.min.js"></script>
        <style>
    
        </style>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
         class HelloMessage extends React.Component{
           render(){
           console.log(this.props.children)
             return (
               <ul>
                {
                  this.props.children.map(function(item,index){
                    return <li key={index}>hello,{item}</li>
                  })
                }
               </ul>
             );
           }
         };
         const data = {
           address:'wuhan',
           obj:{
             name:'sonia'
           }
         };
          
          ReactDOM.render(
            <HelloMessage>
              <span>a</span>
              <span>b</span>
              <span>c</span>
            </HelloMessage>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    

      

    <!DOCTYPE html>
    <html>
      <head>
        <title>component</title>
        <meta charset="UTF-8" />
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="node_modules/babel-standalone/babel.min.js"></script>
        <style>
    
        </style>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          function Sub(props){
            return <p>{props.name}</p>
          };
         class HelloMessage extends React.Component{
           render(){
             return (
              <div>
                <h1>hello,{this.props.name}</h1>
                <Sub name='123'/>
              </div>
             )
           }
         };
    
          
          ReactDOM.render(
            <HelloMessage name="lili"/>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    

      

    <!DOCTYPE html>
    <html>
      <head>
        <title>component</title>
        <meta charset="UTF-8" />
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="node_modules/babel-standalone/babel.min.js"></script>
        <style>
    
        </style>
      </head>
      <body>
        <div id="example"></div>
         <!-- super(props); 子类调用父类构造器  Component(props)
         constructor  构造函数
         super()关键字   父类/子类继承的一种方式
          -->
        <script type="text/babel">
         class HelloMessage extends React.Component{
          constructor(props){
            super(props);   
            this.state ={
              name:'123'
            }
          }
           render(){
             return (
              <div>
                <h1>hello,{this.state.name}</h1>
                <h1>hello,{this.props.name}</h1>
              </div>
             )
           }
         };
    
          
          ReactDOM.render(
            <HelloMessage name="lili"/>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    

      

    <!DOCTYPE html>
    <html>
      <head>
        <title>state 生命周期</title>
        <meta charset="UTF-8" />
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="node_modules/babel-standalone/babel.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        
        <script type="text/babel">
          class Hello extends React.Component{
            constructor(props, context) {
              super(props, context);
    
              this.state = {
                opacity: 1.0
              };
            }
    
            componentDidMount () {
              this.timer = setInterval(()=> {
                var opacity1 = this.state.opacity;
                opacity1 -= .05;
                if (opacity1 < 0.1) {
                  opacity1 = 1.0;
                }
                this.setState({
                  opacity: opacity1
                });
              }, 100);
            }
    
            render () {
              return (
                <div style={{opacity: this.state.opacity}}>
                  Hello {this.props.name}
                </div>
              );
            }
          };
    
          ReactDOM.render(
            <Hello name="world"/>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    

      

  • 相关阅读:
    【BZOJ4445】【SCOI2015】—小凸想跑步(半平面交)
    【BZOJ4444】【SCOI2015】—国旗计划(倍增+贪心)
    【BZOJ4443】【SCOI2015】—小凸玩矩阵(二分+最大匹配)
    【BZOJ4518】【SDOI2016】—征途(斜率优化dp)
    【BZOJ4199】【NOI2015】—品酒大会(后缀数组)
    【BZOJ3160】【2013湖北互测week1】—万径人踪灭(FFT+Manacher)
    ifconfig 查看网卡信息
    rm:删除目录和文件
    查看进程:ps
    wget 下载命令
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/9742894.html
Copyright © 2011-2022 走看看