react中,外部传入的属性,如果在外部改变了,组件内如何得知并作出响应?

如果是vue,会在组件内通过watch来监听该属性。但react呢?

可以使用以下几种方法:

1、在类组件中

可以使用componentDidUpdate生命周期方法来监听prop的变化。

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.myProp !== this.props.myProp) {
      // 在这里处理myProp的变化
    }
  }

  render() {
    return <div>{this.props.myProp}</div>;
  }
}

2、对于函数组件,可以使用React Hooks中的useEffect来达到类似的效果

import React, { useEffect } from 'react';

function MyComponent({ myProp }) {
  useEffect(() => {
    // 在这里处理myProp的变化
  }, [myProp]);

  return <div>{myProp}</div>;
}

这都是AI告诉我的。