Git Product home page Git Product logo

Comments (2)

RubyLouvre avatar RubyLouvre commented on June 14, 2024

例子

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!--  <script type='text/javascript' src="./lib/shallowCompare.js"></script>-->
    <script type='text/javascript' src="./dist/React.js"></script>
    <!-- <script type='text/javascript' src="./lib/ReactTestUtils.js"></script>-->
   <!--<script type='text/javascript' src="./test/react.js"></script>
    <script type='text/javascript' src="./test/react-dom.js"></script>-->

    <!--<script type='text/javascript' src="./test/react-lite.js"></script>-->
    <script type='text/javascript' src="./lib/babel.js"></script>

</head>

<body>

    <div>开发者工具</div>
    <pre>
          
        </pre>
    <div id='example'></div>


    <script type='text/babel'>
   
     
    var container = document.getElementById("example")
    var div = container
    // var PropTypes = React.PropTypes
    if(!window.ReactDOM){
       window.ReactDOM = window.React
       var PropTypes = React.PropTypes
    }

    var expect = function(a) {
        return {
            toBe: function(b) {
                console.log(a, b, a === b)
            }
        }
    }
   
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                flag: 1
            };
        }
        componentDidMount(props){
            console.log("App did mount")
        }
        componentWillUpdate(props){
            console.log("App will update")
        }
        componentDidUpdate(props){
            console.log("App did update")
        }
        render() {
            return (<div>{
                this.state.flag ?
                [<Child key="a" text="111" />,
                <Child key="b" text="222" />]:
                [<Child key="a" text="333" />,
                <Child key="b" text="444" />]
                 }</div>
            );
        }
    }
    class Child extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                text: props.text 
            };
        }
        render(){
            return <span className={this.state.text}>{this.state.text}</span>
        }
        componentDidMount(props){
            console.log("Child did mount")
        }
        componentWillReceiveProps(props){
            console.log("Child ",this.props.text, "will receive")
             this.setState({
                 text: props.text
             })
        }
        componentWillUpdate(props){
            console.log("Child ",this.props.text, "will update")
        }
        componentDidUpdate(props){
            console.log("Child ",this.props.text, "did update")
        }
    }

    var s = ReactDOM.render(<App />, div);
     s.setState({
         flag: 0
     })
  
    </script>
</body>
</html>

image

from anu.

RubyLouvre avatar RubyLouvre commented on June 14, 2024 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <!--  <script type='text/javascript' src="./lib/shallowCompare.js"></script>-->

 <script type='text/javascript' src="./dist/React.js"></script>
</head>

<body>
  <div>开发者工具</div>
  <pre>
     A did mount
     B did mount
     C did mount
     A will receive
     B will receive
     C will receive
     A did update
     B did update
     C did update
     A will receive
     B will receive
     C will receive
     A did update
     B did update
     C did update
</pre>
  <div id='example'></div>
  <script type='text/babel'>
   
     
      var container = document.getElementById("example")
      var div = container
     // var PropTypes = React.PropTypes
      if(!window.ReactDOM){
        window.ReactDOM = window.React
       
      }
      var PropTypes = React.PropTypes
      var expect = function(a) {
          return {
              toBe: function(b) {
                  console.log(a, "\nvs\n",b, a === b)
              }
          }
      }
      var list  = []
      function logger(a){
        console.log(a)
      }
     
      var a  = 1;
      class A extends React.Component {
          constructor(props) {
              super(props);
              this.state = {
                  text: "aaa"
              };
          }

          componentDidMount() {
              logger("A did mount");
              ReactDOM.render(<div><A text="111"/><B text="222"/><C text="333"/></div>, div);
          
          }
          componentWillReceiveProps(){
              logger("A will receive");
          }

          componentDidUpdate() {
              logger("A did update");
              if(a){
                  a = 0;
                  ReactDOM.render(<div><A text="111"/><B text="222"/><C text="333"/></div>, div);
              }

          }
          render() {
              return <div>{this.state.text}</div>;
          }
      }
      class B extends React.Component {
          constructor(props) {
              super(props);
              this.state = {
                  text: "bbb"
              };
          }

          componentDidMount() {
              logger("B did mount");
          }
          componentWillReceiveProps(){
              logger("B will receive");
          }

          componentDidUpdate() {
              logger("B did update");
          }
          render() {
              return <div>{this.state.text}</div>;
          }
      }
      class C extends React.Component {
          constructor(props) {
              super(props);
              this.state = {
                  text: "ccc"
              };
          }
          componentWillReceiveProps(){
              logger("C will receive");
          }
          componentDidMount() {
              logger("C did mount");
          }
          componentDidUpdate() {
              logger("C did update");
          }
          render() {
              return <div>{this.state.text}</div>;
          }
      }
      var s = ReactDOM.render(<div><A/><B/><C/></div>, div);
     
    </script>

</body>

</html>

此例子用于验证drainQueue开头几句话

export function drainQueue() {
    
    var queue = mainQueue.shift();
    //如果父元素拥有多个子组件，如果第一个组件在mounted/updated钩子里再次更新父元素，
    //那么mainQueue可能没有子数组了，需要置换queue为currentQueue，执行里面的mounted/updated钩子
    if(!queue &&  currentQueue.length){
        queue = currentQueue;
    }
    options.beforePatch();
    //先执行所有元素虚拟DOMrefs方法（从上到下）
    Refs.clearElementRefs();
    let needSort = [],
  //....略
}

from anu.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.