1. it('should render a simple component', () => {
  2.     function Child() {
  3.       return <div>Hello World</div>;
  4.     }
  5.     function Parent() {
  6.       return <Child />;
  7.     }
  8.     ReactNoopPersistent.render(<Parent />);
  9.     expect(ReactNoopPersistent.flushWithHostCounters()).toEqual({
  10.       hostDiffCounter: 0,
  11.       hostCloneCounter: 0,
  12.     });
  13.     ReactNoopPersistent.render(<Parent />); //
  14.     expect(ReactNoopPersistent.flushWithHostCounters()).toEqual({
  15.       hostDiffCounter: 1,
  16.       hostCloneCounter: 1,
  17.     });
  18.     // Child() === Child()  为 false
  19.   });

使用代码测试 Child() === Child() 为 false。

  1. it('should not diff referentially equal host elements', () => {
  2.     function Leaf(props) {
  3.       return (
  4.         <span>
  5.           hello
  6.           <b />
  7.           {props.name}
  8.         </span>
  9.       );
  10.     }
  11.     const constEl = (
  12.       <div>
  13.         <Leaf name="world" />
  14.       </div>
  15.     );
  16.     function Child() {
  17.       return constEl;
  18.     }
  19.     function Parent() {
  20.       return <Child />;
  21.     }
  22.     ReactNoopPersistent.render(<Parent />);
  23.     expect(ReactNoopPersistent.flushWithHostCounters()).toEqual({
  24.       hostDiffCounter: 0,
  25.       hostCloneCounter: 0,
  26.     });
  27.     ReactNoopPersistent.render(<Parent />);
  28.     expect(ReactNoopPersistent.flushWithHostCounters()).toEqual({
  29.       hostDiffCounter: 0,
  30.       hostCloneCounter: 0,
  31.     });
  32.   });
  33.   // Child() === Child()  为 true

使用代码测试 Child() === Child() 为 true。没有进行 diff 与 clone。

clone 的 ReactElemnt

  1. it('should not diff parents of setState targets', () => {
  2.     let childInst;
  3.     function Leaf(props) {
  4.       return (
  5.         <span>
  6.           hello
  7.           <b />
  8.           {props.name}
  9.         </span>
  10.       );
  11.     }
  12.     class Child extends React.Component {
  13.       state = {name: 'Batman'};
  14.       render() {
  15.         childInst = this;
  16.         return (
  17.           <div>
  18.             <Leaf name={this.state.name} />
  19.           </div>
  20.         );
  21.       }
  22.     }
  23.     function Parent() {
  24.       return (
  25.         <section>
  26.           <div>
  27.             <Leaf name="world" />
  28.             <Child />
  29.             <hr />
  30.             <Leaf name="world" />
  31.           </div>
  32.         </section>
  33.       );
  34.     }
  35.     ReactNoopPersistent.render(<Parent />);
  36.     expect(ReactNoopPersistent.flushWithHostCounters()).toEqual({
  37.       hostDiffCounter: 0,
  38.       hostCloneCounter: 0,
  39.     });
  40.     childInst.setState({name: 'Robin'});
  41.     expect(ReactNoopPersistent.flushWithHostCounters()).toEqual({
  42.       // section > div > Child > div
  43.       // section > div > Child > Leaf > span
  44.       // section > div > Child > Leaf > span > b
  45.       hostDiffCounter: 3,
  46.       // section
  47.       // section > div
  48.       // section > div > Child > div
  49.       // section > div > Child > Leaf > span
  50.       // section > div > Child > Leaf > span > b
  51.       hostCloneCounter: 5,
  52.     });
  53.     ReactNoopPersistent.render(<Parent />);
  54.     expect(ReactNoopPersistent.flushWithHostCounters()).toEqual({
  55.       // Parent > section
  56.       // Parent > section > div
  57.       // Parent > section > div > Leaf > span
  58.       // Parent > section > div > Leaf > span > b
  59.       // Parent > section > div > Child > div
  60.       // Parent > section > div > Child > div > Leaf > span
  61.       // Parent > section > div > Child > div > Leaf > span > b
  62.       // Parent > section > div > hr
  63.       // Parent > section > div > Leaf > span
  64.       // Parent > section > div > Leaf > span > b
  65.       hostDiffCounter: 10,
  66.       hostCloneCounter: 10,
  67.     });
  68.   });

这个 高效Update 中有说明。此处的clone更指向于 beginWork —> bailoutOnAlreadyFinishedWork
image.png