xxx

project/p3/read.text

@@ -5,7 +5,7 @@
 5、生命周期函数
 constructor()
 render()
-componentWillmount(newProps,newState)
 componentDidmount(preProps,preSatte)
-shouldComponentUpdate(newProps,newState)
+componentDidUpdate(preProps,preSatte)
 componentWillmount()
+shouldComponentUpdate(newProps,newState)

project/p4/src/App.js

@@ -1,6 +1,4 @@
 import React from 'react';
-// import ReactDom from 'react-dom';
-// import HeaderComponent from './components/header/index'
 import './assets/css/public.css'
 import './assets/css/app.css'
 class App extends React.Component{

project/p4/src/components/header/index.js

@@ -1,19 +0,0 @@
-import React,{Component} from 'react';
-import prop from 'prop-types';
-class HeaderComponent extends Component{
-    render(){
-        return(
-            <div id="header" style={this.props.isShow ? {display:'block'}:{display:'none'}}>{this.props.title}</div>
-        );
-    }
-}
-//prop设置属性
-HeaderComponent.propTypes={
-    title:prop.string.isRequired,
-    isShow:prop.bool.isRequired
-}
-//prop设置默认值
-HeaderComponent.defaultProps={
-    title:'默认值'
-}
-export default HeaderComponent;

project/p5/src/App.js

@@ -1,5 +1,4 @@
 import React from 'react';
-// import ReactDom from 'react-dom';
 import HeaderComponent from './components/header/index'
 import Input from './components/input/index'
 import './assets/css/public.css'

project/p6/src/App.js

@@ -1,5 +1,4 @@
 import React from 'react';
-// import ReactDom from 'react-dom';
 import Slot from './components/slot/index'
 import './assets/css/public.css'
 import './assets/css/app.css'
@@ -9,18 +8,24 @@ class App extends React.Component{
     this.state={
     }
   }
-  del=function(){
+  del=()=>function(){
     alert("删除")
   } 
   render(){
     return (
       <div className="APP">
-         <Slot type="button" className="hehe1" style={{fontSize:"20px", width:"100px"}}>保存</Slot>
+         <Slot  className="hehe1" style={{fontSize:"20px", width:"100px"}}><h1>保xxx存</h1></Slot>
+
          <form action="http://www.baidu.com"  target="_black">
           <input type="text"></input>
           <Slot type="submit" className="hehe2" style={{fontSize:"20px", width:"120px"}}>提交</Slot>
          </form>
-         <Slot type="button" className="hehe3" style={{fontSize:"20px", width:"120px"}} haha={this.del.bind(this)}>删除</Slot>
+
+         <Slot type="button" className="hehe3" 
+         style={{fontSize:"20px", width:"120px"}} 
+         haha={this.del.bind(this)}
+         >删除</Slot>
+         
          <Slot type="button" className="hehe4" style={{fontSize:"20px", width:"120px",marginLeft:"10px"}} >禁用</Slot>
          
       </div>

project/p6/src/assets/css/app.css

@@ -11,3 +11,8 @@
 .slot-hehe4{
     color: #760aff;
 }
+form{
+    margin: 20px 0;
+    padding: 12px;
+    border: 1px solid #666;
+}

project/p6/src/components/input/index.js

@@ -1,10 +0,0 @@
-import React,{Component} from 'react'
-export default class InputComponent extends Component{
-    render(){
-        return(
-            <div>
-                <input type="text" onChange={this.props.hehe}/>
-            </div>
-        )
-    }
-}

project/p6/src/components/slot/index.js

@@ -15,3 +15,7 @@ export default class hehe extends Component{
         )
     }
 }
+// props设置默认值
+hehe.defaultProps={
+    type:'buton'
+}

project/p7/read.text

@@ -1 +1,2 @@
 1、槽口
+2、lazy Suspense 懒加载