猿时代
猿时代

【ES6】结合react说一说ES6面向对象的应用

发布于 2023-01-04 09:58:47

基础

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>Document</title>
  5.     <script src="react.js"></script>
  6.     <script src="react-dom.js"></script>
  7.     <script src="browser.js"></script>
  8.     <script type="text/babel">
  9.         class Text extends React.Component{ //继承自 React.Component
  10.             constructor(...args){ //将参数收集起来
  11.                 super(...args) //将所有参数继承并展开
  12.             }
  13.             render(){ //render方法是必须的
  14.                 return <span>abcD</span>
  15.             }
  16.         }
  17.         window.onload = function(){
  18.             let oDiv = document.getElementById('div1')
  19.             ReactDOM.render( //渲染
  20.                 <Text></Text>,
  21.                 oDiv
  22.             )
  23.         }
  24.     </script>
  25. </head>
  26.  
  27. <body>
  28.     <div id="div1"></div>
  29. </body>

this.props

  1.     class Item extends React.Component{
  2.         constructor(...args){
  3.             super(...args)
  4.         }
  5.         render(){
  6.             return <li>{this.props.str}</li> //通过this.props.str设置参数
  7.         }
  8.     }
  9.     window.onload = function(){
  10.         let oDiv = document.getElementById('div1')
  11.         ReactDOM.render(
  12.             <ul>
  13.                 <Item str="123"></Item>
  14.                 <Item str="456"></Item>
  15.                 <Item str="789"></Item>
  16.             </ul>,
  17.             oDiv
  18.         )
  19.     }

组件加组件

  1.     class Item extends React.Component{
  2.         constructor(...args){
  3.             super(...args)
  4.         }
  5.         render(){
  6.             return <li>{this.props.str}</li> 
  7.         }
  8.     }
  9.     class List extends React.Component{
  10.         constructor(...args){
  11.             super(...args)
  12.         }
  13.         render(){
  14.             let aItems = []
  15.             for(var i = 0; i < this.props.arr.length; i++){
  16.                 aItems.push(<Item str={this.props.arr[i]}></Item>)
  17.             }
  18.             return <ul>{aItems}</ul>
  19.         }
  20.     }
  21.     window.onload = function(){
  22.         let oDiv = document.getElementById('div1')
  23.         ReactDOM.render(
  24.             <List arr={[0,1,2,3]}></List>,
  25.             oDiv
  26.         )
  27.     }

map优化

  1.     class Item extends React.Component{
  2.         constructor(...args){
  3.             super(...args)
  4.         }
  5.         render(){
  6.             return <li>{this.props.str}</li> 
  7.         }
  8.     }
  9.     class List extends React.Component{
  10.         constructor(...args){
  11.             super(...args)
  12.         }
  13.         render(){
  14.             //let aItems = this.props.arr.map(a=><Item str={a}></Item>)
  15.             return <ul>{this.props.arr.map(a=><Item str={a}></Item>)}</ul>
  16.         }
  17.     }
  18.     window.onload = function(){
  19.         let oDiv = document.getElementById('div1')
  20.         ReactDOM.render(
  21.             <List arr={[0,1,2,3]}></List>,
  22.             oDiv
  23.         )
  24.     }