延迟渲染React组件

Question

我有一个React组件,其中包含许多子组件.我想不是一次性渲染子组件,而是在延迟一段时间后(每个孩子统一或不同).

我在想 - 有没有办法怎么做？

Answer 1

我认为最直观的方法是给孩子们一个"等待" prop,它会将组件隐藏在从父母传递下来的持续时间内.通过将默认状态设置为隐藏,React仍将立即呈现组件,但在状态发生更改之前它将不可见.然后,您可以设置componentWillMount调用函数以在通过props传递的持续时间之后显示它.

var Child = React.createClass({
    getInitialState : function () {
        return({hidden : "hidden"});
    },
    componentWillMount : function () {
        var that = this;
        setTimeout(function() {
            that.show();
        }, that.props.wait);
    },
    show : function () {
        this.setState({hidden : ""});
    },
    render : function () {
        return (
            <div className={this.state.hidden}>
                <p>Child</p>
            </div>
        )
    }
});

然后,在Parent组件中,您需要做的就是在显示Child之前传递您希望Child等待的持续时间.

var Parent = React.createClass({
    render : function () {
        return (
            <div className="parent">
                <p>Parent</p>
                <div className="child-list">
                    <Child wait={1000} />
                    <Child wait={3000} />
                    <Child wait={5000} />
                </div>
            </div>
        )
    }
});

这是一个演示

Answer 2

我使用Hooks 和 TypeScript创建了延迟组件

import React, { useState, useEffect } from 'react';

type Props = {
  children: React.ReactNode;
  waitBeforeShow?: number;
};

const Delayed = ({ children, waitBeforeShow = 500 }: Props) => {
  const [isShown, setIsShown] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsShown(true);
    }, waitBeforeShow);
  }, [waitBeforeShow]);

  return isShown ? children : null;
};

export default Delayed;

只需将另一个组件包装到 Delayed

export function LoadingScreen = () => {
  return (
    <Delayed>
      <div />
    </Delayed>
  );
};

Answer 3

在您的父组件中<Father />,您可以创建一个初始状态,在该状态中跟踪每个子项(例如,使用和id),指定一个布尔值,这意味着是否呈现:

getInitialState() {
    let state = {};
    React.Children.forEach(this.props.children, (child, index) => {
        state[index] = false;
    });
    return state;
}

然后,在安装组件时,启动计时器以更改状态:

componentDidMount() {
    this.timeouts = React.Children.forEach(this.props.children, (child, index) => {
         return setTimeout(() => {
              this.setState({ index: true; }); 
         }, child.props.delay);
    });
}

渲染子项时,可以通过重新创建它们,将匹配子项的状态指定为prop,指示是否必须呈现组件.

let children = React.Children.map(this.props.children, (child, index) => {
    return React.cloneElement(child, {doRender: this.state[index]});
});

所以在你的<Child />组件中

render() {
    if (!this.props.render) return null;
    // Render method here
}

触发超时后,将更改状态并重新呈现父组件.儿童道具会更新,如果doRender是true,他们会自行渲染.

Answer 4

延迟组件的另一种方法:

Delayed.jsx:

import React from 'react';
import PropTypes from 'prop-types';

class Delayed extends React.Component {

    constructor(props) {
        super(props);
        this.state = {hidden : true};
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({hidden: false});
        }, this.props.waitBeforeShow);
    }

    render() {
        return this.state.hidden ? '' : this.props.children;
    }
}

Delayed.propTypes = {
  waitBeforeShow: PropTypes.number.isRequired
};

export default Delayed;

用法:

 import Delayed from '../Time/Delayed';
 import React from 'react';

 const myComp = props => (
     <Delayed waitBeforeShow={500}>
         <div>Some child</div>
     </Delayed>
 )

Answer 5

使用 useEffect 钩子，我们可以在输入字段中输入时轻松实现延迟功能：

import React, { useState, useEffect } from 'react'

function Search() {
  const [searchTerm, setSearchTerm] = useState('')

  // Without delay
  // useEffect(() => {
  //   console.log(searchTerm)
  // }, [searchTerm])

  // With delay
  useEffect(() => {
    const delayDebounceFn = setTimeout(() => {
      console.log(searchTerm)
      // Send Axios request here
    }, 3000)

    // Cleanup fn
    return () => clearTimeout(delayDebounceFn)
  }, [searchTerm])

  return (
    <input
      autoFocus
      type='text'
      autoComplete='off'
      className='live-search-field'
      placeholder='Search here...'
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  )
}

export default Search