账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react-reudx 如何阻止子组件更新 ?
    44
    0

    我有2个组件,TestAge,他们都通过connect获取数据。

    其中AgeTest的子组件。

    如果我在 Test父组件的shouldComponentUpdate return false

    发现Test确实不更新,但是其子组件Age还是会更新(来自connect部分的数据)。

    问题是,我如何阻止Age不更新??

    import {change} from 'actions'
    
    
    class Age extends PureComponent{
        constructor(props){
            super(props);
            this.add=this.add.bind(this);
        }
        add(){
            this.props.change({
                name:'haha',
                age:this.props.age+1
            });
        }
        render(){
            return(
                <div>
                    {this.props.names}:{this.props.age}
                    <input type="button"onClick={this.add} value="+"/>
                </div>
            )
        }
    }
    const AgeConnect=connect((state)=>{
        return state.iReducer;
    },(dispatch)=>{
        return {
            change:(o)=>dispatch(change(o))
        }
    })(Age);
    
    
    class Test extends Component{
        constructor(props){
            super(props)
        }
        shouldComponentUpdate(){
            return false;
        }
        render(){
            return(
                <div>
                    {this.props.name}
                    <AgeConnect  names={this.props.name} />
                </div>
            )
        }
    }
    
    
    
    const TestConnect=connect((state)=>{
        return state.iReducer;
    },(dispatch)=>{
        return {
            change:(o)=>dispatch(change(o))
        }
    })(Test);
    
    export default TestConnect;
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 颠沛流离 普通会员 1楼

      在React中,要阻止子组件更新,可以使用React的useEffect Hook和useState Hook。useEffect Hook主要用于管理副作用(即副作用是在组件的状态改变时执行的代码),而useState Hook主要用于管理组件的状态(在状态改变时执行的代码)。

      以下是一个简单的例子,说明如何使用useEffect Hook来阻止子组件更新:

      ```jsx import React, { useState } from 'react';

      function MyComponent() { const [count, setCount] = useState(0);

      useEffect(() => { console.log('MyComponent mounted');

      const handleClick = () => {
        setCount(count + 1);
      };
      
      return () => {
        console.log('MyComponent unmounted');
      };
      

      }, []);

      return (

      {count}

      ); }

      export default MyComponent; ```

      在这个例子中,useEffect Hook首先打印出"MyComponent mounted",这是在组件加载时执行的代码。然后,它定义了一个副作用函数,当点击按钮时,将count状态加1,并返回一个清理副作用函数,当组件卸载时执行。

      useState Hook用于管理组件的状态,我们在这里使用useState Hook来初始化一个名为count的状态变量,并在组件的状态改变时执行相应的操作。

      在组件中,我们定义了一个handleClick函数,当点击按钮时,调用handleClick函数,并将count状态设置为count + 1。然后,我们返回一个清理副作用函数,当组件卸载时执行。

      MyComponent组件的render方法中,我们使用useState Hook来初始化状态,并在状态改变时调用handleClick函数。然后,我们使用<button>元素来显示按钮,当点击按钮时,调用handleClick函数,并在状态改变时更新状态。

      这样,当组件加载时,MyComponent组件的count状态被初始化为0。每次handleClick函数被调用时,count状态会递增1,但不会更新count状态的值。当组件卸载时,handleClick函数不再被调用,count状态的值也不会被更新,因此count状态不会在子组件中更新。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部