22.2react生命周期与react脚手架

Posted 2020-12-29 zhongchao666

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了22.2react生命周期与react脚手架相关的知识，希望对你有一定的参考价值。

一.类:es6

<script type="text/babel">
class Person{
    age = 10;
    constructor(name){
        this.name = name;
        //this.age = 10;
    }
    getName(){
        return this.name;
    }
    getAge(){
        return this.age;
    }
}
let p = new Person("aaa");
console.log(p.getName());
console.log(p.getAge());
</script>

res:
技术分享图片

二.生命周期函数

组件生命周期概述

1.初始化

在组件初始化阶段会执行

constructor
static getDerivedStateFromProps()
componentWillMount() / UNSAFE_componentWillMount()
render()
componentDidMount()

2.更新阶段

props或state的改变可能会引起组件的更新，组件重新渲染的过程中会调用

以下方法：

componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate() / UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

3.卸载阶段

componentWillUnmount()

4.错误处理

componentDidCatch() 同Vue的错误函数
子级不能捕获自己的错误，只能父级捕获子级的错误 —— 冒泡

参考文献:

https://reactjs.org/docs/react-component.html

https://blog.csdn.net/qq_29311407/article/details/79861522

constructor init

react	vue
componentWillMount	beforeMount
componentDidMount	mounted
componentWillUpdate	beforeUpdate
componentDidUpdate	updated
render 渲染
componentWillUnmount	beforeDistory
没有componentDidlUnmount	distoryed
componentWillReceiveProps(props,state)组件属性更新 —— 状态不会监听
UNSAFE_componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState) 组件属性和状态更新

react                            vue
componentWillMount   =      beforeMount
componentDidMount    =      mounted

componentWillUpdate     =      beforeUpdate
componentDidUpdate      =      updated

render  渲染

componentWillUnmount     =     beforeDistory
没有componentDidlUnmount  =    distoryed

componentWillReceiveProps(props,state)  组件属性更新 —— 状态不会监听 

UNSAFE_componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps, nextState)      组件属性和状态更新

顺序：

==1.初始化==：

1、constructor
2、componentWillMount（即将被淘汰的方法）、UNSAFE_componentWillMount
(顺序：先执行componentWillMount再执行UNSAFE_componentWillMount)
3、render
4、componentDidMount
5、ReactDom.render(1,2,fn);

==2.更新==的顺序：

属性更新、状态更新

1.1?componentWillReceiveProps 属性
1.2?shouldComponentUpdate 状态
—————— 特别: 有返回值 true/false
? ? ? ? ? ?true继续往下执行
? ? ? ? ? ?false终止渲染

2、componentWillMount
3、render
4、componentDidMount

componentWillUpdate 消失 ==>替患者 UNSAFE_componentWillUpdate

==3.销毁==:释放资源 ? 比如定时器对象置空null

componentWillUnmount
1、通过原生删除节点的方式不会触发钩子函数
2、必须用过react自身的方式进行释放
ReactDOM.unmountComponentAtNode(container)
切换组件

案例:

exp1:

<script type="text/babel">
class Test extends React.Component{
    constructor(...args){
        super(...args);
        this.state = {a:12,b:5};
        //初始化 属性 和数据 内部的属性和函数 只会调用一次
        console.log("init constructor",this.state,this.props);
    } 
    
    componentWillMount(){
        //原生dom 渲染之前 做数据交换
        console.log("componentWillMount",this.state,this.props);
    }
    componentDidMount(){
        //挂载中 写入页面的dom
        console.log("componentDidMount"); 
    }

    render(){
        //正在渲染页面数据—— 虚拟dom
        console.log("render"); 
        return <div>
            生命周期
        </div>
    }
}
ReactDOM.render(
    <Test name="aaa"/>,
    document.getElementById("app"),
    function(){
        console.log("最终渲染完成了");//只会调用一次
    }
);
</script>

res:
技术分享图片

exp2:

<script type="text/babel">
class Test extends React.Component{
    constructor(...args){
        super(...args);
    } 
    componentWillUnmount(){
        console.log("componentWillUnmount");
    }
    distory(){
        let oApp = document.getElementById("app");
        //document.body.removeChild(oApp);
        ReactDOM.unmountComponentAtNode(oApp);
    }

    render(){
        //正在渲染页面数据—— 虚拟dom
        console.log("render"); 
        return <div>
            生命周期<input onClick={this.distory.bind(this)} type="button" value="销毁" />
        </div>
    }
   
}
ReactDOM.render(
    <Test/>,
    document.getElementById("app")
);
</script>

res:
技术分享图片

<script type="text/babel">
class CompA extends React.Component{
    constructor(...args){
        super(...args);
    } 
    componentWillUnmount(){
        console.log("CompA------componentWillUnmount");
    } 

    render(){
        return <div>组件A </div>
    }
}
class CompB extends React.Component{
    constructor(...args){
        super(...args);
    } 
    componentWillUnmount(){
        console.log("CompB------componentWillUnmount");
    } 

    render(){
        return <div>组件B </div>
    }
}
let i = 0;
document.onclick = function(){
    i++;
    ReactDOM.render(
        i%2==0?<CompA/>:<CompB/>,
        document.getElementById("app")
    );
};
</script>

res:
技术分享图片

exp3:

<script type="text/babel">
class Clock extends React.Component{
    timer = null;
    state = {a:12,iH:"00",iM:"00",iS:"00"};

    componentDidMount(){
        this.tick();
        this.timer = setInterval(()=>{
            this.tick();
        },1000);
    }

    componentWillUpdate(){
       console.log("componentWillUpdate即将更新");
    } 
    componentDidUpdate(){
        console.log("componentDidUpdate更新完成");
     } 

    componentWillUnmount(){
        clearInterval(this.timer);
    } 
    tick(){
        let oDate = new Date();
        this.setState({
            iH:this.addZero(oDate.getHours()),
            iM:this.addZero(oDate.getMinutes()),
            iS:this.addZero(oDate.getSeconds()),
        });
    }
    addZero(n){
        return n < 10?`0${n}`:`${n}`;
    }
   
    render(){
        console.log("render...正在渲染");
        return <div>
            <span>{this.state.iH}</span>:
            <span>{this.state.iM}</span>:
            <span>{this.state.iS}</span>
            <hr />
            <span>{this.state.a}</span>
        </div>
    }
}
ReactDOM.render(
    <Clock/>,
    document.getElementById("app"),
    function(){
        console.log("最终渲染完成了");//只会调用一次
    }
);
</script>

res:
技术分享图片

exp4:

<script type="text/babel">
class Parent extends React.Component{
    state = {
        name:Math.random()
    }

    fn(){
        this.setState({
            name:Math.random()
        });
    }
    render(){
        return <div>父组件 <input onClick={this.fn.bind(this)} type="button" value={"按钮"}/>
            <Child name={this.state.name}/>
        </div>
    }
}
class Child extends React.Component{
    componentWillUpdate(){
        console.log("2.componentWillUpdate即将更新");
     } 
    componentDidUpdate(){
         console.log("4.componentDidUpdate更新完成");
    }  
    componentWillReceiveProps(){
        console.log("1.1.componentWillReceiveProps组件属性更新");
    }
    shouldComponentUpdate(){
        console.log("1.2.shouldComponentUpdate组件属性和状态更新");
        return true;
    }
    render(){
        console.log("3.render...正在渲染");
        return <div>子组件——{this.props.name}</div>
    }
   
}
ReactDOM.render(
    <Parent />,
    document.getElementById("app"),
    function(){
        console.log("最终渲染完成了");//只会调用一次
    }
);
</script>

res:
技术分享图片

<script type="text/babel">

class Test extends React.Component{
    state = {
        name:Math.random()
    }

    fn(){
        this.setState({
            name:Math.random()
        });
    }
    componentWillUpdate(){
        console.log("2.componentWillUpdate即将更新");
     } 
    componentDidUpdate(){
         console.log("4.componentDidUpdate更新完成");
    }  
    componentWillReceiveProps(){
        console.log("1.componentWillReceiveProps组件属性更新");
    }
    render(){
        console.log("3.render...正在渲染");
        return <div>{this.state.name}<input onClick={this.fn.bind(this)} type="button" value={"按钮"}/></div>
    }
   
}
ReactDOM.render(
    <Test />,
    document.getElementById("app")
);
</script>

res:
技术分享图片

<script type="text/babel">

class Test extends React.Component{
    state = {
        name:Math.random()
    }

    fn(){
        this.setState({
            name:Math.random()
        });
    }
    componentWillUpdate(){
        console.log("2.componentWillUpdate即将更新");
     } 
    componentDidUpdate(){
         console.log("4.componentDidUpdate更新完成");
    }  
    shouldComponentUpdate(){
        console.log("1.shouldComponentUpdate组件属性和状态更新");
        return false;
    }
    render(){
        console.log("3.render...正在渲染");
        return <div>{this.state.name}<input onClick={this.fn.bind(this)} type="button" value={"按钮"}/></div>
    }
   
}
ReactDOM.render(
    <Test />,
    document.getElementById("app")
);
</script>

res:
技术分享图片

<script type="text/babel">
class Parent extends React.Component{
    state = {
        name:Math.random()
    }
    fn(){
        this.setState({
            name:Math.random()
        });
    }
    render(){
        return <div>父组件 <input onClick={this.fn.bind(this)} type="button" value={"按钮"}/>
            <Child name={this.state.name}/>
        </div>
    }
}
class Child extends React.Component{ 
    state = {a:1,b:2}; 
    componentWillReceiveProps(props,state){
        console.log("1.1.componentWillReceiveProps组件属性更新",props,state);
        //在这个方法中调用setState()不会起作用，是由于他在render()前被调用
        this.setState({
            a:Math.random(),
            b:Math.random()
        });
    }
    UNSAFE_componentWillReceiveProps(props,state){
        console.log("1.1.UNSAFE_componentWillReceiveProps组件属性更新",props,state);
        //在这个方法中调用setState()不会起作用，是由于他在render()前被调用
        this.setState({
            a:Math.random(),
            b:Math.random()
        });
    } 
    shouldComponentUpdate(props,state){
        console.log("1.2.shouldComponentUpdate组件属性和状态更新",props,state);
        return true;
    }
    render(){
        return <div>子组件——{this.props.name}</div>
    }
   
}
ReactDOM.render(
    <Parent />,
    document.getElementById("app")
);
</script>

res:
技术分享图片

exp5:

<script type="text/babel">
class Parent extends React.Component{
    state = {
        name:Math.random()
    }

    fn(){
        this.setState({
            name:Math.random()
        });
    }
    render(){
        return <div>父组件 ----{this.state.name}<input onClick={this.fn.bind(this)} type="button" value={"按钮"}/>
            <Child name={this.state.name}/>
        </div>
    }
}
class Child extends React.Component{
    state = {
        name:this.props.name
    };
    static getDerivedStateFromProps(nextProps, prevState){
        console.log("1getDerivedStateFromProps",nextProps, prevState);
        return true;
    } 
    componentWillReceiveProps(){
        console.log("2componentWillReceiveProps");
    } 
    
    render(){
        console.log("3.render...正在渲染");
        return <div>子组件——{this.props.name}——{this.state.name}</div>
    }
   
}
ReactDOM.render(
    <Parent />,
    document.getElementById("app"),
    function(){
        console.log("最终渲染完成了");//只会调用一次
    }
);
</script>

res:
技术分享图片

exp6:

<script type="text/babel">
class Test extends React.Component{
    constructor(...args){
        super(...args);
        this.state = {a:12,b:5};
        //初始化 属性 和数据 内部的属性和函数 只会调用一次
        console.log("init constructor",this.state,this.props);
    } 
    UNSAFE_componentWillMount(){
        //原生dom 渲染之前 做数据交换
        console.log("UNSAFE_componentWillMount",this.state,this.props);
    }
    componentWillMount(){
        //原生dom 渲染之前 做数据交换
        console.log("componentWillMount",this.state,this.props);
    }
    
    componentDidMount(){
        //挂载中 写入页面的dom
        console.log("componentDidMount"); 
    }

    render(){
        //正在渲染页面数据—— 虚拟dom
        console.log("render"); 
        return <div>
            生命周期
        </div>
    }
   
}
ReactDOM.render(
    <Test name="aaa"/>,
    document.getElementById("app"),
    function(){
        console.log("最终渲染完成了");//只会调用一次
    }
);
</script>

res:
技术分享图片

exp7:

<script type="text/babel">
class Parent extends React.Component{
    state = {
        name:Math.random()
    }

    fn(){
        this.setState({
            name:Math.random()
        });
    }
    render(){
        return <div>父组件 <input onClick={this.fn.bind(this)} type="button" value={"按钮"}/>
            <Child name={this.state.name}/>
        </div>
    }
}
class Child extends React.Component{

    //UNSAFE_componentWillReceiveProps用来替代componentWillReceiveProps
    componentWillReceiveProps(){
        console.log("1.1.componentWillReceiveProps组件属性更新");
    }
    UNSAFE_componentWillReceiveProps(){
        console.log("1.2.UNSAFE_componentWillReceiveProps组件属性和状态更新");
    }
    render(){
        console.log("3.render...正在渲染");
        return <div>子组件——{this.props.name}</div>
    }
   
}
ReactDOM.render(
    <Parent />,
    document.getElementById("app"),
    function(){
        console.log("最终渲染完成了");//只会调用一次
    }
);
</script>

res:
技术分享图片

exp8:

<script type="text/babel">
class Parent extends React.Component{
    //throw new Error("parent");
    state = {
        name:Math.random()
    }

    fn(){
        this.setState({
            name:Math.random()
        });
    }

    componentDidCatch(){
        console.log("Parent ----- componentDidCatch");
    } 
    render(){
        return <div>父组件 <input onClick={this.fn.bind(this)} type="button" value={"按钮"}/>
            <Child name={this.state.name}/>
        </div>
    }
}
class Child extends React.Component{
    //throw new Error("child");
    componentDidCatch(){
        console.log("child ----- componentDidCatch");
    } 
    render(){
        throw new Error("child");
        console.log("3.render...正在渲染");
        return <div>子组件——{this.props.name}</div>
    }
   
}
ReactDOM.render(
    <Parent />,
    document.getElementById("app"),
    function(){
        console.log("最终渲染完成了");//只会调用一次
    }
);
</script>

res:
技术分享图片

创建reactapp

方法一、? npx create-react-app myreact

方法二、 1.?cnpm i -g create-react-app
? ???2.?create-react-app myreact

cd myreact
npm start

vue-cli:

1、vue-cli2.x vue init webpack myvue
2、vue-cli3.x vue create myvue —— vue.config.js

入口文件：main.js

静态文件：vue-cli2.x ? static/
? ?? ? vue-cli3.x ? public/

组件：? .vue ? template/script/style

==react:==?

??cnpm i -g create-react-app
??create-react-app myreact

入口文件：index.js

静态文件：public/

组件： .js?.css

import?"./xxx.css"

技术分享图片

react 安装：react, react-dom, and react-scripts —— 后台

webpack/babel...

%PUBLIC_URL%/---> public/

改端口

两种方法:

1、myreact ode_modules eact-scriptsscriptsstart.js

2、工程文件 package.json

"start": "set port=8888 && react-scripts start",

要新建两个目录：

1、components

2、assets
? ? 静态文件—— 文件会打包

路由： cnpm i -S react-router-dom

https://reacttraining.com/ 官网 http://reacttraining.cn/

http://react-china.org/t/react-router4/15843

http://react-guide.github.io/react-router-cn/docs/API.html

http://react-guide.github.io/react-router-cn/

jsonp:

http://api.douban.com/v2/movie/in_theaters?callback=xxx&city=北京

subjects

jQuery的ajax没有跨域功能集成jsonp

exp1:

<script type="text/babel">
class MoveBox extends React.Component{
    state = {
        id:1,
        city:"北京"
    }
    /*//第二种
    shouldComponentUpdate(nextProps, nextState){
        console.log(2222,this.state, nextState);
        return true;
    }**/

    fn(data){
        //第三种
        console.log("fn",this.state, data);
        if(this.state.city == data.city)return;
        this.setState({
            id : data.id,
            city:data.city
        });
    }

    render(){
        return <div>

            {
                this.props.arr.map(item=><input 
                className={this.state.id==item.id?"active":""} 
                key={item.id} 
                type="button" 
                onClick={this.fn.bind(this,item)}
                value={item.city}/>)
            }

            <BoxList city={this.state.city}/>
            
        </div>
    }
}
class BoxList extends React.Component{
    state = {
        movies:[]
    };
    componentDidMount(){
        this.getMovies();
    }
    /*
    shouldComponentUpdate(nextProps, nextState){
        console.log(111,nextProps, nextState);
        return true;
    }*/

    UNSAFE_componentWillReceiveProps(props){
        /*方法1
        console.log(props,this.props);
        if(props.city == this.props.city)return;
        */
        this.getMovies();
    }

    getMovies(){
        $.ajax({
            url:"http://api.douban.com/v2/movie/in_theaters",
            data:{
                city:this.props.city
            },
            dataType:"jsonp",
            success:(res)=>{
                console.log(res);
                this.setState({
                    movies:res.subjects
                });

            }
        });
    }
    render(){
        return <ul>
           {
            this.state.movies.map(item=><li key={item.id}>{item.title}</li>)

           }
        </ul>
    }
}

let arr = [
    {id:1,city:"北京"},
    {id:2,city:"上海"},
    {id:3,city:"深圳"},
    {id:4,city:"青岛"}
];


ReactDOM.render(
    <MoveBox arr={arr} />,
    $("#app")[0]
);
</script>

技术分享图片

exp2:

<script type="text/babel">
class MoveBox extends React.Component{
    state = {...this.props.arr[0]};
    fn(data){

        console.log(this);
        //第三种
        //console.log("fn",this.state, data);
        if(this.state.city == data.city)return;
        this.setState({
            id : data.id,
            city:data.city
        });
    }
    render(){// 
        return <div>
            {/*
                this.props.arr.map(item=><input 
                className={this.state.id==item.id?"active":""} 
                key={item.id} 
                type="button" 
                onClick={this.fn.bind(this,item)}
                value={item.city}/>)
            }
            */}
            <BoxTitle arr={this.props.arr} parent={this} fn={this.fn} />
            <BoxList city={this.state.city}/>
            
        </div>
    }
}

class BoxTitle extends React.Component{
    state = {...this.props.arr[0]}

    render(){
        return <div>
            {
                this.props.arr.map(item=><input 
                className={this.state.id==item.id?"active":""} 
                key={item.id} 
                type="button" 
                onClick={this.props.fn.bind(this.props.parent,item)}
                value={item.city}/>)
            }
        </div>
    }
}
class BoxList extends React.Component{
    state = {
        movies:[]
    };
    componentDidMount(){
        this.getMovies();
    }

    UNSAFE_componentWillReceiveProps(props){
        this.getMovies();
    }
    getMovies(){
        $.ajax({
            url:"http://api.douban.com/v2/movie/in_theaters",
            data:{
                city:this.props.city
            },
            dataType:"jsonp",
            success:(res)=>{
                console.log(res);
                this.setState({
                    movies:res.subjects
                });
            }
        });
    }
    render(){
        return <ul>
           {
            this.state.movies.map(item=><li key={item.id}>{item.title}</li>)
           }
        </ul>
    }
}

let arr = [
    {id:1,city:"北京"},
    {id:2,city:"上海"},
    {id:3,city:"深圳"},
    {id:4,city:"青岛"}
];
ReactDOM.render(
    <MoveBox arr={arr} />,
    $("#app")[0]
);
</script>

res:
技术分享图片
-----------------------------

https://reactjs.org/docs/react-component.html#defaultprops

以上是关于22.2react生命周期与react脚手架的主要内容，如果未能解决你的问题，请参考以下文章

react讲解（组件，生命周期以及受控组件）

react组件通信与生命周期

22.2react生命周期与react脚手架

一.类:es6

二.生命周期函数

组件生命周期概述

1.初始化

2.更新阶段

3.卸载阶段

4.错误处理

参考文献:

constructor init

顺序：

==1.初始化==：

==2.更新==的顺序：

==3.销毁==:释放资源 ? 比如定时器 对象置空null

案例:

创建reactapp

vue-cli:

==react:==?

改端口

两种方法:

路由： cnpm i -S react-router-dom

==3.销毁==:释放资源 ? 比如定时器对象置空null