标签: react-lifecycle

我想在父组件中更改道具后在子组件中执行一个函数，而不必管理子/父中的额外状态。

<ParentCompoenent 
  myCallback={() => {}}
  myList={['a','b','c']}
/>

子组件.js

componentWillReceiveProps(nextProps) {
  console.log(this.props.myList, '==', nextProps.myList);  // Outputs ['a','b','c'] == ['a','b','c']
}

当我试图控制 componentWillReceiveProps 中的 nextProps 时，即使在更改道具后，它每次都会给出相同的结果。

我真的不明白反应生命周期。我在 componentDidUpdate() 中运行 console.log 并看到它运行了多次 控制台显示 componentDidUpdate 运行了 3 次

我必须componentDidMount在屏幕 A 中列出一组文件（图像），从此屏幕 AI 有另一个屏幕 B 链接，我可以在其中查看文件的详细视图，并且可以选择删除文档。

当使用调用屏幕 A 时

  <TouchableOpacity style={Styles.HomeButton} onPress={ () => this.props.navigation.navigate('Gallery')}>
     <Text style={Styles.HomeButtonText}>View Photos</Text>
  </TouchableOpacity>

componentDidMount 工作正常，但是当我在取消链接回调中删除文件（我正在使用 react-native-fs）时，我正在调用导航

this.props.navigation.navigate('Gallery');

重定向到屏幕 A 工作正常，但componentDidMount无法正常工作，这意味着我仍然可以在列表中看到已删除的文件。即屏幕 A 不刷新，有什么可能的解决方案吗？

我在 React 和生命周期方面苦苦挣扎。我尝试实现一个非常简单的 Next 按钮，该按钮显示带有下一组项目的下一页。当我手动将状态偏移更改为 3 时，页面将正确呈现下一个项目。但是当我通过按钮使用 setState 时，不会加载新项目。我认为它与生命周期有关，但我还不明白。

class EventsListContainer extends React.Component {
  state = {
    limit: 3,
    offset: 0
  };

  componentDidMount() {
    const { loadEvents } = this.props;
    const { limit, offset } = this.state;
    loadEvents(limit, offset);
  }

  onClickHandler = () => {
    this.setState({ limit: 3, offset: 3 });
    const { limit, offset } = this.state;
    loadEvents(limit, offset);
  };

  render() {
    const { events, isLoggedIn } = this.props;

    return (
      <div>
        <EventsList events={events} isLoggedIn={isLoggedIn} />
        <Button onClick={() => …

我正在学习对生命周期方法做出反应，但仍停留在查询上，即使在网络上进行了大量研究后也无法找到答案。

根据此处的React 官方文档，据说方法 getSnapshotBeforeUpdate 用于在 DOM 提交之前执行某些操作。该函数返回的快照稍后将被 componentDidUpdate 使用。

查询： 参数'prevProps'和'prevState'已经存在于方法componentDidUpdate中，那么为什么它需要函数getSnapshotBeforeUpdate的帮助？我的意思是，函数 componentDidUpdate 有必要的输入来执行 getSnapshotBeforeUpdate 正在执行的操作。

任何帮助，将不胜感激。

最好的，拉胡尔

我有一个按钮组件，里面有一个按钮，有一个状态传递给它isActive和一个单击函数。单击按钮时，isActive标志将发生变化，并且根据情况，应用程序将获取一些数据。按钮的父组件不会重新呈现。我搜索了如何强制停止重新渲染组件，发现React.memo(YourComponent)必须完成这项工作，但在我的情况下仍然不起作用。为 memo 函数传递一个检查函数是否重新渲染也是有意义的，我一直将其设置为 false，但我无法向该函数传递另一个参数。帮助。

按钮.tsx

interface Props {
    isActive: boolean;
    onClick: () => void;
}

const StatsButton: React.FC<Props> = ({ isActive, onClick }) => {
    useEffect(() => {
        console.log('RERENDER');
    }, []);

    return (
        <S.Button onClick={onClick} isActive={isActive}>
            {isActive ? 'Daily stats' : 'All time stats'}
        </S.Button>
    );
};

export default React.memo(StatsButton);

父级.tsx

const DashboardPage: React.FC = () => {

const {
        fetchDailyData,
        fetchAllTimeData,
    } = useDashboard();

    useEffect(() => {
        fetchCountry();
        fetchAllTimeData();
        // eslint-disable-next-line
    }, []); …