22.二、react生命週期與react腳手架(二)

時間  2019-11-12
標籤 react 生命週期 腳手架 欄目 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:
imagecss

二.生命週期函數

組件生命週期概述

1.初始化

在組件初始化階段會執行html

  1. constructor
  2. static getDerivedStateFromProps()
  3. componentWillMount() / UNSAFE_componentWillMount()
  4. render()
  5. componentDidMount()
2.更新階段

props或state的改變可能會引發組件的更新，組件從新渲染的過程當中會調用vue

如下方法：node

  1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
  2. static getDerivedStateFromProps()
  3. shouldComponentUpdate()
  4. componentWillUpdate() / UNSAFE_componentWillUpdate()
  5. render()
  6. getSnapshotBeforeUpdate()
  7. componentDidUpdate()
3.卸載階段

componentWillUnmount()react

4.錯誤處理

componentDidCatch() 同Vue的錯誤函數
子級不能捕獲本身的錯誤，只能父級捕獲子級的錯誤 —— 冒泡webpack

參考文獻:

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

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

image

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.初始化==：

一、constructor
二、componentWillMount（即將被淘汰的方法）、UNSAFE_componentWillMount
(順序：先執行componentWillMount再執行UNSAFE_componentWillMount)
三、render
四、componentDidMount
五、ReactDom.render(1,2,fn);github

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

屬性更新、狀態更新web

1.1 componentWillReceiveProps 屬性
1.2 shouldComponentUpdate 狀態
—————— 特別: 有返回值 true/false
           true繼續往下執行
           false終止渲染

二、componentWillMount
三、render
四、componentDidMount

componentWillUpdate 消失 ==>替患者 UNSAFE_componentWillUpdate

==3.銷燬==:釋放資源   好比定時器 對象置空null

componentWillUnmount
一、經過原生刪除節點的方式不會觸發鉤子函數
二、必須用過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:
image

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:
image

<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:
image

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:
image

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:
image

<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:
image

<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:
image

<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:
image

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:
image

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:
image

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:
image

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:
image

建立reactapp

方法1、  npx create-react-app myreact

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

cd myreact
npm start

vue-cli:

一、vue-cli2.x vue init webpack myvue
二、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"

image

react 安裝：react, react-dom, and react-scripts —— 後臺

webpack/babel...

%PUBLIC_URL%/---> public/

改端口
兩種方法:

一、myreact\node_modules\react-scripts\scripts\start.js

二、工程文件 package.json

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

要新建兩個目錄：

一、components

二、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>

image

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:
image
-----------------------------

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程