（React 框架）React技术

 1 import React from 'react';
 2 import ReactDom from 'react-dom';
 3 
 4 
 5 class Sub extends React.Component {
 6   constructor (props){
 7     console.log("sub constructor")
 8     super(props);
 9     this.state = {count:0};
10   }
11   handleClick(event) {
12     this.setState({count:this.state.count + 1});
13   }
14   render() {
15     console.log('sub render');
16     return (
17       <div id="sub" onClick={this.handleClick.bind(this)}>
18         Sub's count = {this.state.count}
19       </div>
20     );
21   }
22 
23   componentWillMount() {
24     console.log('sub componentwillmont')
25   }
26 
27   componentDidMount() {
28     console.log('sub componentdidmount')
29   }
30   componentWillUnmount(){
31     console.log('sub componentdidunmount')
32   }
33 
34 
35 }
36 
37 
38 class Root extends React.Component{
39   constructor (props) {
40     console.log("root constructor")
41     super(props);
42     this.state = {};
43 
44   }
45   render (){
46     return(
47      <div>
48       <Sub />
49     </div>
50     )
51   }
52 }
53 
54 ReactDom.render(<Root/>, document.getElementById("newroot"));

 1 import React from 'react';
 2 import ReactDom from 'react-dom';
 3 import { runInAction } from 'mobx';
 4 
 5 
 6 class Sub extends React.Component {
 7   constructor (props){
 8     console.log("sub constructor")
 9     super(props);
10     this.state = {count:0};
11   }
12   handleClick(event) {
13     this.setState({count:this.state.count + 1});
14   }
15   render() {
16     console.log('sub render');
17     return (
18       <div style={{height:200 + "px", color:'red', backgroundColor:"#aaffff"}}>
19         <a id='sub' onClick={this.handleClick.bind(this)}>
20           sub'x count = {this.state.cont}
21         </a>
22       </div>
23     );
24   }
25 
26   componentWillMount() {
27     //constructor 之后，第一次render之前
28     console.log('sub componentwillmont')
29   }
30 
31   componentDidMount() {
32     // 第一次render之前
33     console.log('sub componentdidmount')
34   }
35   componentWillUnmount(){
36     //清理工作
37     console.log('sub componentdidunmount')
38   }
39 
40   componentWillReceiveProps(nexProps) {
41     // props更新时，街道新的props，交给shouldComponentUpdate
42     // props组件内只读，只能从外部改变
43     console.log(this.props)
44     console.log(nexProps)
45     console.log('sub com---receiveProps', this.state.count)
46   }
47 
48   shouldComponentUpdate(nexProps, nextState) {
49     // 是否组件更新，props 或state 方式改变，返回布尔值，true才会更新
50     console.log('sub shuold--------', this.state.count, nextState)
51     return true
52 
53   }
54 
55   componentWillUpdate(nexProps, nextState) {
56     //同意更新后，真正更新前，之后调用rener
57     console.log('will update', this.state.count, nextState)
58   }
59 
60   componentDidUpdate(prevProps, prevState){
61     //同意更新后，真正更新后，在render在之后调用
62     console.log('did Update', this.state.count, prevState)
63   }
64 
65 }
66 
67 
68 class Root extends React.Component{
69   constructor (props) {
70     console.log("root constructor")
71     super(props);
72     this.state = {flag:true, name:'root'};
73 
74   }
75   handleClick(event){
76     this.setState({
77       flag:!this.state.flag,
78       name:this.state.flag ? this.state.name.toLowerCase() : this.state.name.toUpperCase()
79     })
80   }
81   render (){
82     return(
83      <div id='t1' onClick={this.handleClick.bind(this)}>
84       my name is {this.state.name}
85       <Sub /> {/* 父组件的render，会引起下一级组件的更新流程，导致props重新发送，即使子组件props没有改变*/}
86     </div>
87     )
88   }
89 }
90 
91 ReactDom.render(<Root/>, document.getElementById("newroot"));

 1 import React from 'react';
 2 import ReactDom from 'react-dom';
 3 // let Wrapper = function (Component/*传入组件*/, props) {
 4 //   return (
 5 //     <div>
 6 //       {props.schoolName}
 7 //       <hr />
 8 //       <Component />
 9 //     </div>
10 //   )
11 // }
12 // 柯里化
13 let Wrapper = function (Component) {
14   function _wrapper(props) {
15     return (
16       <div>
17         {props.schoolName}
18         <hr />
19         <Component />
20       </div>)
21   }
22   return _wrapper
23 }
24 // 第一次简化
25 let Wrapper = function(Component) {
26   return function _wrapper(props){
27     return (
28       <div>
29         {props.schoolName}
30         <hr />
31         <Component />
32       </div>)
33   }
34 }
35 //第二次简化
36 let Wrapper = function(Component) {
37   return (props) => {
38     return (
39       <div>
40         {props.schoolName}
41         <hr />
42         <Component />
43       </div>)
44   }
45 }
46 // 第三次简化
47 let Wrapper = (Component) =>(props) => 
48       (
49       <div>
50         {props.schoolName}
51         <hr />
52         <Component />
53       </div>
54       )
55 
56 //整理
57 let Wrapper = (Component) =>(props) => <div> {props.schoolName} <hr /> <Component /> </div>
58         
71 let Root = (props) => <div>Root</div>
72 
73 // 返回新组件
74 let NewComp = Wrapper(Root)
75 ReactDom.render(<NewComp schoolName="jerry"/>, document.getElementById('newroot'))

 1 import React from 'react';
 2 import ReactDom from 'react-dom';
 3 
 4 let Wrapper = (id, Component) =>(props) => 
 5       (
 6       <div id={id}>
 7         {props.schoolName}
 8         <hr />
 9         <Component />
10       </div>
11       )
12 
13 // 柯里化
14 let Wrapper = id =>  Component => (props) => 
15       (
16       <div id={id}>
17         {props.schoolName}
18         <hr />
19         <Component {...props}/>
20       </div>
21       )
22 
23 
24 @Wrapper('123') // Root = wrapper("123")(Root) = (props) => .....
25 
26 class Root extends React.Component {
27   render(){
28     return <div>Root ----  {this.props.address}</div>
29   }
30 }
31 
32 ReactDom.render(<Root schoolName="jerry" address="somewhere"/>, document.getElementById('newroot'))