20.react库入门

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>