react 常用生命周期

时间：2019-07-18 19:27:58 阅读：64 评论：0 收藏：0 [点我收藏+]

componentDidMount() 方法会在组件已经render()之后执行，这里可以对dom进行操作，编写加载服务器的数据。

componentWillReceiveProps(nextProps) 初始化render时不会执行，只有当父组件传给当前组件的值发生变化才会执行，可以根据属性变化，调用this.setState()来更新子组件，

这里调用更新状态是安全的，并不会触发额外的render调用，如果在这里进行数据请求，它只会在该组件渲染时才会发出，从而减轻请求负担

shouldComponentUpdate 在接收到新props或state时，或者说在componentWillReceiveProps(nextProps)后触发，这个函数不写默认会重新渲染，在这个函数写return false props或state发生变化阻止组件重新渲染

如果shouldComponentUpdate(nextProps, nextState)返回false, 那么componentWillUpdate(nextProps, nextState), render(), componentDidUpdate()都不会被触发;

componentWillUnmount 在组件卸载(unmounted)或销毁(destroyed)之前这个方法可以让你处理一些必要的清理操作，比如无效的timers、interval，或者取消网络请求，或者清理任何在componentDidMount()中创建的DOM元素(elements);

componentWillReceiveProps--案例

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            random:Math.random(),
        }
        this.handleClick = this.handleClick.bind(this);
    }
    tmpPerson = {name:‘张三‘}
    handleClick(){
        this.tmpPerson.name+=‘1‘;
        this.setState({random:Math.random()})
    }
    render() {
        const _this = this;
        return (
            <div classsName="App">
                <button onClick={this.handleClick}>修改名称</button>
                <Demo person={{...this.tmpPerson}}></Demo>
                {/* {...this.tmpPerson}是对 this.tmpPerson的深拷贝，修改值不会影响原始值，传给组件对象值会变化，则输出值不同*/}
                {/* <Demo person={this.tmpPerson}></Demo> this.tmpPerson则是引用对象，地址没变，传给子组件的是同一个对象不会变化，则输出值相同*/ }
            </div>
        )
    }
}

export default App;
class Demo extends Component{
    static propTypes={
        person:PropTypes.any,
    }
    static defaultProps={
        person:{name:‘person对象名‘}
       }
    constructor(props) {
        super(props);
    };
    componentWillReceiveProps(nextProps){
        console.log(`--this.props-->${JSON.stringify(this.props)}`);
        console.log(`--nextProps-->${JSON.stringify(nextProps)}`);
        // --this.props-->{"person":{"name":"张三"}}
        // --nextProps-->{"person":{"name":"张三1"}}
    }
    render(){
     return(
          <h2>姓名：{this.props.person.name}</h2>
          )
          
    }
}

shouldComponentUpdate--案例

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            num:0,
            title:‘react shouldComponentUpdate study‘,
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
        this.setState({
            num:this.state.num+1
        })
    }
    render() {
        const _this = this;

        return (
            <div classsName="App">
                <h2>App,{this.state.num}</h2>
                <button onClick={this.handleClick}>btn0</button>
                <Demo title={this.state.title}></Demo>
            </div>
        )
    }
}

export default App;
class Demo extends Component{
    shouldComponentUpdate(nextProps){ //加了这段代码更新num值不会渲染这个组件，否则就会渲染
        if(nextProps.title===this.props.title){
            return false;
        }
    }
    render(){
     console.log("demo 执行中")
     return(
          <h2>demo,{this.props.title}</h2>
          )
          
    }
}

react 常用生命周期

原文：https://www.cnblogs.com/zhangyaolan/p/11072501.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)