Question

我有一个视图，该视图需要显示一个闪烁的文本组件（BlinkMe），其中包含警告消息-仅在剩余天数为40或更少的情况下。

闪烁的文本组件需要剩余天数作为道具。

根据我对RN的初级知识，我对方法的看法如下-

1-在ComponentWillMount（）中创建一个函数，该函数根据当前日期减去到期时间（通过prop传递）来计算剩余天数，然后将此数字应用于state并将状态传递给component渲染：

即

class HomeView extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      expDays : 0,
    };
  }

  UNSAFE_componentWillMount(){
    let curDate= new Date();
    let expDate= new Date(this.props.user.badgeExpiry);
    if (!moment.isMoment(curDate)) {curDate = moment(curDate);}
    if (!moment.isMoment(expDate)) {expDate = moment(expDate);}
    const daysRem = expDate.diff(curDate, 'days');
    if(daysRem <= 40){
      this.setState({
        expDays: daysRem,
      });
    }
  }
  componentWillUnmount(){
    this.setState({
      expDays: 0,
      expDateShow:false,
    });
  }


render() {


    return (


          <View style={[HomeStyles.homeHeader, isLoggedIn() && HomeStyles.homeHeaderCheckedIn  ]}>
            <View style={HomeStyles.homeSegemnts}>

                <View ><Text style={HomeStyles.homeSegmentText}>{currentUser.badgeId}   <BlinkMe days={this.state.expDays} /></Text>



                </View>
              </View>

或

2-在渲染器中创建一个函数，该函数无需使用状态即可返回所需的天数：

即：

class HomeView extends React.Component {


render() {

    const getDays = () => {
      let curDate= new Date();
      let expDate= new Date(this.props.user.badgeExpiry);
      if (!moment.isMoment(curDate)) {curDate = moment(curDate);}
      if (!moment.isMoment(expDate)) {expDate = moment(expDate);}
      const daysRem = expDate.diff(curDate, 'days');
      return daysRem;
    };


    return (

       <View style={HomeStyles.homeSegemntsSegment}>
                <Image
                  style={HomeStyles.homeSegmentImg}
                  source={require('../images/icons/ico-user-id.png')}
                />
                <View ><Text style={HomeStyles.homeSegmentText}>{currentUser.badgeId}   <BlinkMe days={getDays()} /></Text>



                </View>
              </View>

所以我的问题是在这种情况下哪种方法是最佳实践-还是我在两个方面都错了？？

道具的ReactNative SetState与渲染中状态的直接使用

0 个答案: