20.react库入门

2023-08-01 15:29:10

vue插件：

使用方式：Vue.use(插件名称);

{}/function

1、对象

export default {

	install(Vue,options){

	}

}

2、函数

export default (Vue,options) => {

}

插件里面传参数通过 propsData属性进行传递！

exp1:

import Toast from "./toast";

export default {

    install(Vue,options){//1

        //插件2种形式 1、标签  2、方法

        //2、方法

         Vue.prototype.$toast = ()=>{

            let VueComponent = Vue.extend(Toast);

            let oDiv = new VueComponent().$mount().$el;

            console.log(111111,oDiv);

            //111111 <div class="toast">toast插件-----msg默认值</div>  

            document.body.appendChild(oDiv);

            setTimeout(()=>{

                document.body.removeChild(oDiv);

            },2000);

        }

    }

}

show(){

      //传参数

    this.$toast("自定义提示信息1")

}

res:先出现后消失

exp2:

import Toast from "./toast";

export default {

    install(Vue,options){//1

        //插件2种形式 1、标签  2、方法

        //2、方法

        let oDiv = null;

        Vue.prototype.$toast = {

            open(){

                let VueComponent = Vue.extend(Toast);

                oDiv = new VueComponent().$mount().$el;

                console.log(111111,oDiv);

                //111111 <div class="toast">toast插件-----msg默认值</div>

                document.body.appendChild(oDiv);

            },

            close(){

                setTimeout(()=>{

                    document.body.removeChild(oDiv);

                },2000);

            }

        }

    }

}

show(){

      //传参数

    this.$toast.open();

    this.$toast.close();

}

res:

先出现后消失

exp3:

import Toast from "./toast";

export default {

    install(Vue,options){//1

        //插件2种形式 1、标签  2、方法

        //2、方法

        Vue.prototype.$toast= function(options){//2

            console.log("options",options);

            let VueComponent = Vue.extend(Toast);

            if(typeof options == "string"){

                options = {msg:options};

            }

            //options {msg: "自定义提示信息2"}

            console.log("this",this);

            //let vm = new Vue();

            let vm = new VueComponent({

                el:this.$el,

                propsData:options //{msg:xxxxx}

            });

            console.log(this.$el);

            /*<div class="home">

                    home

                <input type="button" value="按钮"></div>*/

            setTimeout(()=>{

                //document.body.removeChild(oDiv);

            },2000);

        }

    }

}

show(){

    //传参数

    this.$toast({msg:"自定义提示信息1"})

}

res:

react

https://reactjs.org/

https://doc.react-china.org/

JSX 语法

javascript xml ---> html

jsx其实就是在script标签内写js代码

1、引入三个文件

react/react-dom/babel

cnpm react react-dom babel-standalone

2、type="text/babel"

3、ReactDOM.render(oEl,oApp,callback);

exp:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="react.js"></script>

<script src="react-dom.js"></script>

<script src="babel.js"></script>

</head>

<script type="text/babel">

window.onload = function(){

    //1获取元素app

    let oApp = document.getElementById("app");

    //2创建元素

    /*let oDiv = document.createElement("div");

    oDiv.innerHTML = "hello react!";

    */

    //不需要引号  JSX

    let oDiv = <div>hello react</div>;

    //3插入、渲染

    //oApp.appendChild(oDiv);

    ReactDOM.render(oDiv,oApp,function(){

        alert("页面渲染完成");

    });

};

</script>

<body>

<div id="app"></div>

</body>

</html>

jsx:

1、class---> className

for --> htmlFor

2、只能有一个根节点，不能只有兄弟节点

3、单标签必须闭合

exp2:

<script type="text/babel">

//class --> className

//for ---> htmlFor

//必须有一个父节点 不能有兄弟节点

//html5 <input> <input/>  单标签必须闭合

ReactDOM.render(

    //<div className="box">hello react</div>,

    //<div><span>span1</span><span>span2</span></div>,

    <div>

        <label htmlFor="user">用户名</label>

        <input type="text" id="user" value="" />

        <img />

    </div>,

    document.getElementById("app")

);

</script>

exp2:

<script type="text/babel">

let oDiv = React.createElement("div",{

    className:"box",

    id:"div1",

    //children:"hello react1"

    children:["hello"," react"]

});

ReactDOM.render(

    oDiv,

    document.getElementById("app")

);

</script>

exp4:

<script type="text/babel">

/*

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

</ul>

*/

ReactDOM.render(

    React.createElement("ul",null,[

        React.createElement("li",{key:1},"1111"),

        React.createElement("li",{key:2},"222"),

        React.createElement("li",{key:3},"333"),

    ]),

    document.getElementById("app")

);

</script>

react赋值

1、字符串 "值"

2、变量 {变量} {"值"}

exp1:

<script type="text/babel">

//vue {{xxx}}           react {xxx}

//v-bind:tilte="title"  title={title}

let msg = "hello React!";

let title =  "我是标题1"

ReactDOM.render(

    <div title={title}>{msg}</div>,

    document.getElementById("app")

);

</script>

exp2:

<script type="text/babel">

let msg = "hello!"

let id = "div1";

ReactDOM.render(

    <div>

        <div id="div1" >{msg}</div>

        <div id={id} >{msg}</div>

        <div id={"div1"} >{msg}</div>

    </div>,

    document.getElementById("app")

);

</script>

exp3:

<script type="text/babel">

let msg = "hello!"

let json = {width:"200px",height:"200px",background:"red"};

ReactDOM.render(

    <div>

{ /*xxx <div style="width:200px;height:200px;background:red;">{msg}</div>//错误 */}

        <div style={json}>{msg}</div>

        <div style={{width:"200px",height:"200px",background:"pink"}}>{msg}</div>

    </div>,

    document.getElementById("app")

);

</script>

组件

1、组件名必须首字母大写

2、必须继承React.Component

3、必须有render函数并且有返回值

4、使用的时候必须和类目一致

class Test extends React.Component{

	contructor(...args){

		super(...args);

	}

	render(){

		return <div>内容</div>

	}

}

exp:

<script type="text/babel">

//自定义组件

class Test extends React.Component{

    render(){

        return <div>自定义组件</div>

    }

}

ReactDOM.render(

    <Test />,

    document.getElementById("app")

);

</script>

事件：

1、事件名必须驼峰标识 onClick onMouseOver

2、事件后面必须跟函数 this有问题

解决

1、onClick={this.fn.bind(this)}

2、在构造函数内改变this

this.fn = this.fn.bind(this);

3、用箭头函数包

onClick={()=>{this.fn()}}

exp1:

this.fn.bind(this)

点击显示12.

<script type="text/babel">

//自定义组件

class Test extends React.Component{

    constructor(){

        super();

        this.a = 12;

    }

    fn(){

        console.log(1,this);

        alert(this.a);

    }

    render(){

        console.log(2,this);

        return <div>

            <input onClick={this.fn.bind(this)} type="button" value="按钮"/>

        </div>

    }

}

ReactDOM.render(

    <Test />,

    document.getElementById("app")

);

</script>

exp2:

this.fn = this.fn.bind(this);

显示11.

<script type="text/babel">

//自定义组件

class Test extends React.Component{

    constructor(){

        super();

        this.a = 11;

        this.fn = this.fn.bind(this);

    }

    fn(){

        console.log(1,this);

        alert(this.a);

    }

    render(){

        console.log(2,this);

        return <div>

            <input onClick={this.fn} type="button" value="按钮"/>

        </div>

    }

}

ReactDOM.render(

    <Test />,

    document.getElementById("app")

);

</script>

exp3:

()=>{this.fn()}

显示12

<script type="text/babel">

//自定义组件

class Test extends React.Component{

    constructor(){

        super();

        this.a = 12;

    }

    fn(){

        console.log(1,this);

        alert(this.a);

    }

    render(){

        console.log(2,this);

        return <div>

            <input onClick={()=>{this.fn()}} type="button" value="按钮"/>

        </div>

    }

}

ReactDOM.render(

    <Test />,

    document.getElementById("app")

);

</script>

组件内的构造函数

super()必须写在第一位 ———— 自己明确的调用constructor构造函数

exp1:

错误的案例,属性不能直接修改,可以修改状态

<script type="text/babel">

//组件属性、参数

class Test extends React.Component{

    constructor(...args){

        super(...args);

    }

    plus(){

        this.props.a++;

        console.log(this.props.a);

    }

    render(){

        return <div>

            <span>{this.props.a}</span>

            <input onClick={this.plus.bind(this)} type="button" value="plus" />

        </div>

    }

}

ReactDOM.render(

    <Test a={1} />,

    document.getElementById("app")

);

</script>

exp2:

状态可变可改不能直接修改 this.state.xxx

必须通过set方法 this.setState({xxx:vlaue});异步

<script type="text/babel">

//定义状态  必须定义在构造函数内

class Test extends React.Component{

    constructor(...args){

        super(...args);

        this.state = {

            a:11,b:1

        }

    }

    plus(){

        //this.state.a++;

        //异步 渲染需要时间

        this.setState({

            a:this.state.a+1

        });

        console.log(this.state.a);

    }

    render(){

        console.log("渲染完成");

        return <div>

            <span>{this.state.a}-----{this.state.b}</span>

            <input onClick={this.plus.bind(this)} type="button" value="plus" />

        </div>

    }

}

ReactDOM.render(

    <Test />,

    document.getElementById("app")

);

</script>

改变this

1、call 第二个参数不是数组

2、apply 第二个参数是数组

3、bind 返回一个改变了this指向的函数

属性和参数

属性只读不能修改

状态可变可改不能直接修改 this.state.xxx

必须通过set方法 this.setState({xxx:vlaue});异步

exp:属性

输出17.

<script type="text/babel">

//组件属性、参数

class Test extends React.Component{

    constructor(...args){

        super(...args);

        console.log(1111,args);

        console.log(1111,this.props.a+this.props.b);

    }

    render(){

        return <div>数据{this.props.a}-----{this.props.b}</div>

    }

}

ReactDOM.render(

    //<Test a="12" b="5"/>,

    <Test a={12} b={5}/>,

    document.getElementById("app")

);

</script>

style -----> {json}

exp1:

不可直接修改属性

<script type="text/babel">

class Test extends React.Component{

    constructor(...args){

        super(...args);

        this.flag = true;

    }

    fn(){

        this.flag = !this.flag

        console.log(1,this.flag);

    }

    render(){

        let json = {background:this.flag?"yellow":"pink"};

        console.log(2,this.flag);

        return <div>

            <input style={json} onClick={this.fn.bind(this)} type="button" value="按钮"/>

        </div>

    }

}

ReactDOM.render(

    <Test />,

    document.getElementById("app")

);

</script>

exp2:

修改style状态

<script type="text/babel">

class Test extends React.Component{

    constructor(...args){

        super(...args);

        this.state = {

            flag : true

        }

    }

    fn(){

       //this.state.flag = !this.state.flag;

       this.setState({

           flag:!this.state.flag

       });

    }

    render(){

        let json = {background:this.state.flag?"yellow":"pink"};

        return <div>

            <input style={json} onClick={this.fn.bind(this)} type="button" value="按钮"/>

        </div>

    }

}

ReactDOM.render(

    <Test />,

    document.getElementById("app")

);

</script>

class ----> []

exp3:

修改class状态

<script type="text/babel">

class Test extends React.Component{

    constructor(...args){

        super(...args);

        this.state = {

            flag : true

        }

    }

    fn(){

       //this.state.flag = !this.state.flag;

       this.setState({

           flag:!this.state.flag

       });

    }

    render(){

        let arr = null;

        if(this.state.flag){

            arr = ["box","active"];

        } else {

            arr = ["box"];

        }

        return <div>

            <input className={arr.join(" ")} onClick={this.fn.bind(this)} type="button" value="按钮"/>

        </div>

    }

}

ReactDOM.render(

    <Test />,

    document.getElementById("app")

);

</script>

案例:

轮播图:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

*{margin:0;padding:0;list-style:none;}

.banner{position:relative;width:520px; height:280px; margin:30px auto;overflow:hidden;}

.banner ul{position:absolute;width:300%; height:100%;  transition:1s all ease;}

.banner ul li{float:left;width:520px; height:100%}

.banner ul li img{width:100%; height:100%;}

.banner ol{position:absolute;left:200px;bottom:50px;}

.banner ol li{ text-indent: -999999px;float:left;width:30px; height:30px; border-radius:50%; background: yellow;}

.banner ol li.active{background:pink;}

</style>

<script src="react.js"></script>

<script src="react-dom.js"></script>

<script src="babel.js"></script>

<script type="text/babel">

let arr = [

    "https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg",

    "https://img.alicdn.com/tfs/TB1EZDNbzrguuRjy0FeXXXcbFXa-520-280.jpg_q90_.webp",

    "https://img.alicdn.com/tps/i4/TB1VVIOIeuSBuNjy1Xcwu3YjFXa.png_q90_.webp"

];

class Banner extends React.Component{

    constructor(...args){

        super(...args);

        this.state = {

            iNow:0

        }

        console.log(this.props.list);

    }

    fn(index){

        //alert(index);

        this.setState({

            iNow:index

        });

    }

    render(){

        let aUli = this.props.list.map((item,index)=><li key={index}><img src={item} /></li>);

        let aOli = this.props.list.map((item,index)=><li className={this.state.iNow==index?"active":""} onClick={this.fn.bind(this,index)} key={index}>{index}</li>);

        return (<div className="banner">

            <ul style={{left:-520*this.state.iNow}}>

                {aUli}

            </ul>

            <ol>

                {aOli}

            </ol>

        </div>);

    }

} 

ReactDOM.render(

    <Banner list={arr}/>,

    document.getElementById("app")

);

</script>

<body>

<div id="app">

<!--

<div className="banner">

    <ul>

        <li><img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></li>

        <li><img src="https://img.alicdn.com/tfs/TB1EZDNbzrguuRjy0FeXXXcbFXa-520-280.jpg_q90_.webp"/></li>

        <li><img src="https://img.alicdn.com/tps/i4/TB1VVIOIeuSBuNjy1Xcwu3YjFXa.png_q90_.webp"/></li>

    </ul>

    <ol>

        <li className="active">1</li>

        <li>2</li>

        <li>3</li>

    </ol>

</div>    -->

</div>

</body>

</html>

码农公寓