在应用 React 开发的这段时间里，我最大的感触就是 “这是 React 最好的时代，也是最坏的时代” ！「好」在于 hooks 开启了不一样的开发模式，在思考形式上要求更关注于数据之间的依赖关系，同时书写形式更加简便，总体上晋升了开发效率；「坏」在于我的项目中常常是类组件与函数组件共存，而类组件以类编程思维为主导，开发过程中更关注于整个组件的渲染周期，在保护我的项目时经常须要在两种思维模式中左右横跳，这还不是最坏的一点。

某日，老王问我：“你始终在「每周一瞥」搬运 hooks 的文章，你感觉 hooks 有哪些易造成内存泄露的点？” 引发了我的沉思（因为我的脑子一片空白）。咱们始终在探讨 hooks，到底在探讨什么？尽管社区内对于 hooks 的探讨很多，但更多的是科普 Hooks API 怎么应用，亦或是将其与类组件生命周期、redux 进行比照，而短少对于 hooks 最佳实际的探讨与共识，我想这才是「最坏」的一点。明天，咱们无妨讨论一下 hooks 所带来的变动以及咱们如何去拥抱这些变动。

注「每周一瞥」是团队内翻译并分享外网陈腐货的一个专栏。

React 16.8 公布以来，Hooks 深入人心，带来最大的变动有三点：思维模式的转变，渲染过程中作用域的变动以及数据流的扭转。

思维模式

从 React 官网能够理解到，Hooks 的设计动机在于简化组件间状态逻辑的复用，反对开发者将关联的逻辑形象为更小的函数，并升高认知老本，不必去了解 JS Class 中令人窒息的 this。在这样的动机之下，hooks 中弱化了组件生命周期的概念，强化了状态与行为之间的依赖关系，这容易疏导咱们更多的关注“做什么”，而非“怎么做”[[1]](https://jaredpalmer.com/blog/...。

假如有这么一个场景：组件 Detail 中依赖父级组件传入的 query 参数进行数据申请，那么无论是基于类组件还是 Hooks，咱们都须要定义一个异步申请办法 getData。不同的是，在类组件的开发模式中，咱们要思考的更偏向于“怎么做”：在组件挂载实现时申请数据，并在组件产生更新时，比拟新旧 query 值，必要时从新调用 getData 函数。

class Detail extends React.Component {  state = {    keyword: '',  }  componentDidMount() {    this.getData();  }  getSnapshotBeforeUpdate(prevProps, prevState) {    if (this.props.query !== prevProps.query) {      return true;    }    return null;  }  componentDidUpdate(prevProps, prevState, snapshot) {    if (snapshot) {      this.getData();    }  }  async getData() {    // 这是一段异步申请数据的代码    console.log(`数据申请了，参数为：${this.props.query}`);    this.setState({      keyword: this.props.query    })  }  render() {    return (      <div>        <p>关键词: {this.state.keyword}</p>      </div>    );  }}

而在利用了 Hooks 的函数组件中，咱们思考“做什么”：不同 query 值，展现不同的数据。

function Detail({  query}) {  const [keyword, setKeyword] = useState('');  useEffect(() => {    const getData = async () => {      console.log(`数据申请了，参数为：${query}`);      setKeyword(query);    }    getData();  }, [query]);  return (    <div>      <p>关键词: {keyword}</p>    </div>  );}

在这种主导下，开发者在编码过程中的思维模式也应随之扭转，须要思考数据与数据、数据与行为之间的同步关系。这种模式能够更简洁地将相干代码组合到一起，甚至形象成自定义 hooks，实现逻辑的共享，仿佛有了插拔式编程的滋味????。

尽管 Dan Abramov 在本人的博客中提到，从生命周期的角度思考并决定何时执行副作用是在逆势而为[[2]](https://overreacted.io/a-comp...，然而理解各个 hooks 在组件渲染过程中的执行机会，有助于咱们与 React 放弃了解的一致性，可能更加精确地专一于“做什么”。 Donavon 以图表模式梳理比照了 hooks 范式与生命周期范式[[3]](https://github.com/donavon/ho...，可能帮忙咱们了解 hooks 在组件中的工作机制。每次组件产生更新时，都会从新调用组件函数，生成新的作用域，这种变动也对咱们开发者提出了新的编码要求。

作用域

在类组件中，组件一旦实例化后，便有了本人的作用域，从创立到销毁，作用域始终不变。因而，在整个组件的生命周期中，每次渲染时外部变量始终指向同一个援用，咱们能够很轻易的在每次渲染中通过 this.state 拿到最新的状态值，也能够应用 this.xx 获取到同一个外部变量。

class Timer extends React.Component {  state = {    count: 0,    interval: null,  }  componentDidMount() {    const interval = setInterval(() => {      this.setState({        count: this.state.count + 1,      })    }, 1000);    this.setState({      interval    });  }  componentDidUnMount() {    if (this.state.interval) {      clearInterval(this.state.interval);    }  }  render() {    return (      <div>        计数器为：{this.state.count}      </div>    );  }}

Hooks 中， render 与 state 的关系更像闭包与局部变量。每次渲染时，都会生成新的 state 变量，React 会向其写入当次渲染的状态值，并在当次渲染过程中放弃不变。也即每次渲染相互独立，都有本人的状态值。同理，组件内的函数、定时器、副作用等也是独立的，外部所拜访的也是当次渲染的状态值，因而经常会遇到定时器/订阅器内无奈读取到最新值的状况。

function Timer() {  const [count, setCount] = useState(0);  useEffect(() => {    const interval = setInterval(() => {      setCount(count + 1);    // 始终只为 1     }, 1000);    return () => {      clearInterval(interval);    }  }, []);  return (    <div>      计数器为：{count}    </div>  );}

如果咱们想要拿到最新值，有两种解决办法：一是利用 setCount 的 lambada 模式，传入一个以上一次的状态值为参数的函数；二是借助 useRef 钩子，在其 current 属性中存储最新的值。

function Timer() {  const [count, setCount] = useState(0);  useEffect(() => {    const interval = setInterval(() => {      setCount(c => c + 1);    }, 1000);    return () => {      clearInterval(interval);    }  }, []);  return (    <div>      计数器为：{count}    </div>  );}

在 hook-flow 的图中，咱们能够理解到当父组件产生从新渲染时，其所有（状态、局部变量等）都是新的。一旦子组件依赖于父组件的某一个对象变量，那么无论对象是否发生变化，子组件拿到的都是新的对象，从而使子组件对应的 diff 生效，依旧会从新执行该局部逻辑。在上面的例子中，咱们的副作用依赖项中蕴含了父组件传入的对象参数，每次父组件产生更新时，都会触发数据申请。

function Info({  style,}) {  console.log('Info 产生渲染');  useEffect(() => {    console.log('从新加载数据'); // 每次产生从新渲染时，都会从新加载数据  }, [style]);  return (    <p style={style}>      这是 Info 里的文字    </p>  );}function Page() {  console.log('Page 产生渲染');  const [count, setCount] = useState(0);  const style = { color: 'red' };  // 计数器 +1 时，引发 Page 的从新渲染，进而引发 Info 的从新渲染  return (    <div>      <h4>计数值为：{count}</h4>      <button onClick={() => setCount(count + 1)}> +1 </button>      <Info style={style} />    </div>  );}

React Hooks 给咱们提供了解决方案，useMemo 容许咱们缓存传入的对象，仅当依赖项发生变化时，才从新计算并更新相应的对象。

function Page() {  console.log('Page 产生渲染');  const [color] = useState('red');  const [count, setCount] = useState(0);  const style = useMemo(() => ({ color }), [color]); // 只有 color 产生实质性扭转时，style 才会变动  // 计数器 +1 时，引发 Page 的从新渲染，进而引发 Info 的从新渲染  // 然而因为 style 缓存了，因而不会触发 Info 内的数据从新加载  return (    <div>      <h4>计数值为：{count}</h4>      <button onClick={() => setCount(count + 1)}> +1 </button>      <Info style={style} />    </div>  );}

数据流

React Hooks 在数据流上带来的变动有两点：一是反对更敌对的应用 context 进行状态治理，防止层级过多时向中间层承载无关参数；二是容许函数参加到数据流中，防止向上层组件传入多余的参数。

useContext 作为 hooks 的外围模块之一，能够获取到传入 context 的以后值，以此达到跨层通信的目标。React 官网有着具体的介绍，须要关注的是一旦 context 值产生扭转，所有应用了该 context 的组件都会从新渲染。为了防止无关的组件重绘，咱们须要正当的构建 context ，比方从第一节提到的新思维模式登程，按状态的相关度组织 context，将相干状态存储在同一个 context 中。

在过来，如果父子组件用到同一个数据申请办法 getData ，而该办法又依赖于下层传入的 query 值时，通常须要将 query 和 getData 办法一起传递给子组件，子组件通过判断 query 值来决定是否从新执行 getData。

class Parent extends React.Component {   state = {    query: 'keyword',  }  getData() {    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${this.state.query}`;    // 申请数据...    console.log(`申请门路为：${url}`);  }  render() {    return (      // 传递了一个子组件不渲染的 query 值      <Child getData={this.getData} query={this.state.query} />    );  }}class Child extends React.Component {  componentDidMount() {    this.props.getData();  }  componentDidUpdate(prevProps) {    // if (prevProps.getData !== this.props.getData) { // 该条件始终为 true    //   this.props.getData();    // }    if (prevProps.query !== this.props.query) { // 只能借助 query 值来做判断      this.props.getData();    }  }  render() {    return (      // ...    );  }}

在 React Hooks 中 useCallback 反对咱们缓存某一函数，当且仅当依赖项发生变化时，才更新该函数。这使得咱们能够在子组件中配合 useEffect ，实现按需加载。通过 hooks 的配合，使得函数不再仅仅是一个办法，而是能够作为一个值参加到利用的数据流中。

function Parent() {  const [count, setCount] = useState(0);  const [query, setQuery] = useState('keyword');  const getData = useCallback(() => {    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${query}`;    // 申请数据...    console.log(`申请门路为：${url}`);  }, [query]);  // 当且仅当 query 扭转时 getData 才更新  // 计数值的变动并不会引起 Child 从新申请数据  return (    <>      <h4>计数值为：{count}</h4>      <button onClick={() => setCount(count + 1)}> +1 </button>      <input onChange={(e) => {setQuery(e.target.value)}} />      <Child getData={getData} />    </>  );}function Child({  getData}) {  useEffect(() => {    getData();  }, [getData]);    // 函数能够作为依赖项参加到数据流中  return (    // ...  );}

总结

回到最后的问题：“ hooks 有哪些易造成内存泄露的点？”，我了解造成内存泄露危险的在于 hooks 所带来的作用域的变动。因为每次渲染都是独立的，一旦有副作用援用了局部变量，并且未在组件销毁时及时开释，那么就极易造成内存泄露。对于如何更好的应用 hooks， Sandro Dolidze 在博客中列了一个 checkList[[4]](https://medium.com/@sdolidze/...，我感觉是个不错的倡议，能够帮忙咱们写出正确的 hooks 利用。

  1. 遵循 Hooks 规定；
  2. 不要在函数体中应用任何副作用，而是将其放到 useEffect 中执行；
  3. 勾销订阅/解决/销毁所有已应用的资源；
  4. 首选 useReducer 或 useState 的函数更新，以避免在钩子中读写雷同的值；
  5. 不要在 render 函数中应用可变变量，而是应用 useRef；
  6. 如果在 useRef 中保留的内容的生命周期比组件自身小，那么在解决资源时不要开释该值；
  7. 小心死循环和内存泄露；
  8. 当须要进步性能是，能够 memoize 函数和对象；
  9. 正确设置依赖项（undefined => 每次渲染； [a, b] => 当 a 或 b 扭转时；[] => 仅执行一次）；
  10. 在可复用用例中应用自定义 hooks.

本文次要从自身材感登程，比照总结了在开发过程中，hooks 所带来的变动以及如何去应答这种变动。了解有误之处，欢送斧正~

参考

[1] React is becoming a black box
[2] A Complete Guide to useEffect
[3] hook-flow
[4] The Iceberg of React Hooks

文章可随便转载，但请保留此原文链接。
十分欢送有激情的你退出 ES2049 Studio，简历请发送至 caijun.hcj@alibaba-inc.com。