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嵌套

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

<!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>

查看全文

相关阅读:
一次网络IO优化的讨论
 服务器框架回顾
 一个小工具：DebugFile
TPO-23 C2 Advice on choosing courses
TPO-23 C1 Post a student announcement
TPO-22 C2 Revise a music history paper
TPO-22 C1 Complain about a biased article
TPO-21 C2 Which elective courses to take
TPO-20-Apply for the undergraduate research fund
TPO-21 C1 Find a building for orientation

原文地址：https://www.cnblogs.com/shaozhu520/p/9742894.html