精读《use-what-changed 源码》

[ascoders]

use-what-changed 是一个性能检测工具库，可以帮助你快速检测哪些属性变化导致了渲染，并以可视化方式打印到控制台：

---

精读《use-what-changed 源码》

[cike8899]

import React, { useState, useEffect } from "react";
import { useWhatChanged } from "@simbathesailor/use-what-changed";

class Parent extends React.PureComponent {
  render() {
    return (
      <div>
        <p>会死循环吗？</p>
        <Child style={{ color: "red" }} />;
      </div>
    );
  }
}

const Child = ({ style }) => {
  const [localStyle, setLocalStyle] = useState();

  useWhatChanged([style]);

  useEffect(() => {
    console.info("inner");
    setLocalStyle(style);
  }, [style]);

  console.info("xxxx", style);

  return "children";
};

export default Parent;

这段代码 我测试下来并不会导致死循环，
https://codesandbox.io/s/usewhatchanged-uxt61?file=/src/Parent.jsx:0-568

是我写的有问题吗？

[finch001]

这个工具类挺不错的。刚刚试了下他的babel插件发现没有生效，稍微看了下他的babel插件代码，还没发现到底是我的dev环境问题还是他babel转换插件有问题。

[finch001]

import React, { useState, useEffect } from "react";
import { useWhatChanged } from "@simbathesailor/use-what-changed";

class Parent extends React.PureComponent {
  style = { color: "red" };
  render() {
    return (
      <div>
        <p>会死循环吗？</p>
        <Child style={this.style} />;
      </div>
    );
  }
}

const Child = ({ style }) => {
  const [localStyle, setLocalStyle] = useState();

  useWhatChanged([style]);

  useEffect(() => {
    setLocalStyle(style);
  }, [style]);

  console.info("xxxx", style);

  return "children";
};

export default Parent;

这段代码 我测试下来并不会导致死循环，
https://codesandbox.io/s/usewhatchanged-uxt61?file=/src/Parent.jsx:0-568

是我写的有问题吗？

this.style 这个持有引用只有一个，示例代码每次都会 新创建对象 {{style}}

[cike8899]

import React, { useState, useEffect } from "react";
import { useWhatChanged } from "@simbathesailor/use-what-changed";

class Parent extends React.PureComponent {
  style = { color: "red" };
  render() {
    return (
      <div>
        <p>会死循环吗？</p>
        <Child style={this.style} />;
      </div>
    );
  }
}

const Child = ({ style }) => {
  const [localStyle, setLocalStyle] = useState();

  useWhatChanged([style]);

  useEffect(() => {
    setLocalStyle(style);
  }, [style]);

  console.info("xxxx", style);

  return "children";
};

export default Parent;

这段代码 我测试下来并不会导致死循环，
https://codesandbox.io/s/usewhatchanged-uxt61?file=/src/Parent.jsx:0-568
是我写的有问题吗？

this.style 这个持有引用只有一个，示例代码每次都会 新创建对象 {{style}}

我改了 但是还是没有死循环，你可以在本地试试

[Jancat]

补充一个用于调试 Props 的 hook recipe：https://usehooks.com/useWhyDidYouUpdate/

（里面的 recipes 容易学习理解，注释充足）

[ihupoo]

import React, { useState, useEffect } from "react";
import { useWhatChanged } from "@simbathesailor/use-what-changed";

class Parent extends React.PureComponent {
  style = { color: "red" };
  render() {
    return (
      <div>
        <p>会死循环吗？</p>
        <Child style={this.style} />;
      </div>
    );
  }
}

const Child = ({ style }) => {
  const [localStyle, setLocalStyle] = useState();

  useWhatChanged([style]);

  useEffect(() => {
    setLocalStyle(style);
  }, [style]);

  console.info("xxxx", style);

  return "children";
};

export default Parent;

这段代码 我测试下来并不会导致死循环，
https://codesandbox.io/s/usewhatchanged-uxt61?file=/src/Parent.jsx:0-568
是我写的有问题吗？

this.style 这个持有引用只有一个，示例代码每次都会 新创建对象 {{style}}

我改了 但是还是没有死循环，你可以在本地试试

我直接用的文章内的代码，打印console也没有死循环。

[ascoders]

import React, { useState, useEffect } from "react";
import { useWhatChanged } from "@simbathesailor/use-what-changed";

class Parent extends React.PureComponent {
  style = { color: "red" };
  render() {
    return (
      <div>
        <p>会死循环吗？</p>
        <Child style={this.style} />;
      </div>
    );
  }
}

const Child = ({ style }) => {
  const [localStyle, setLocalStyle] = useState();

  useWhatChanged([style]);

  useEffect(() => {
    setLocalStyle(style);
  }, [style]);

  console.info("xxxx", style);

  return "children";
};

export default Parent;

这段代码 我测试下来并不会导致死循环，
https://codesandbox.io/s/usewhatchanged-uxt61?file=/src/Parent.jsx:0-568
是我写的有问题吗？

this.style 这个持有引用只有一个，示例代码每次都会 新创建对象 {{style}}

我改了 但是还是没有死循环，你可以在本地试试

我直接用的文章内的代码，打印console也没有死循环。

这是要盖楼的节奏。。楼主已经发现了文章代码的问题，现已修改 demo，之前的例子确实不会死循环。想要死循环必须子组件触发父组件 rerender，让父组件产生新的引用，子组件的 useEffect 又依赖这个引用才会～

[Jancat]

再来一个更加强大的 re-render debug 工具：https://github.com/welldone-software/why-did-you-render