react 在componentDidUpdate中使用setState

componentDidUpdate()会在更新后立即被调用,首次渲染不会执行此方法。
当组件更新后,可以在此处对DOM进行操作,如果你对更新前后的props进行了比较,也可以选择在此处进行网络请求。你也可以在componentDidUpdate()中直接调用setState(),但请注意它必须被包裹在一个条件语句中。

componentDidUpdate(prevProps,prevState,snapshot)
componentDidUpdate(prevProps,prevState){
        if(prevProps.location.pathname !== this.props.location.pathname){
          this.setState({
            selectedTab: this.props.location.pathname,
          })
        }
      }
  • 8
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React setState 可以是同步的,也可以是异步的,这取决于它的使用场景。 情况一:在 React 的生命周期函数(componentDidMount、componentDidUpdatecomponentWillUnmount)以及 React 事件处理函数setState 是同步的。 例如,在以下代码setState 是同步的: ``` class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { this.setState({ count: this.state.count + 1 }); console.log(this.state.count); // 输出 1 } render() { return <div>{this.state.count}</div>; } } ``` 情况二:在 setTimeout、setInterval、Promise 等异步函数setState 是异步的。 例如,在以下代码setState 是异步的: ``` class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } handleClick() { setTimeout(() => { this.setState({ count: this.state.count + 1 }); console.log(this.state.count); // 输出 0 }, 1000); } render() { return <button onClick={this.handleClick.bind(this)}>Click</button>; } } ``` 在异步场景下,React 会将多个 setState 合并为一个更新,以提高性能。因此,如果需要使用最新的 state 值,可以在 setState 传递一个函数,而不是一个对象。 例如,在以下代码setState 使用函数的方式可以确保获取到最新的 state 值: ``` class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } handleClick() { setTimeout(() => { this.setState((prevState) => ({ count: prevState.count + 1 })); console.log(this.state.count); // 输出 1 }, 1000); } render() { return <button onClick={this.handleClick.bind(this)}>Click</button>; } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值