四、组件

这里写图片描述
一、简单的组件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
//因为组件是可见的显示的，需要用到rennd方法渲染组件
class Comp extends React.Component{。  
    render()  //渲染组件就是 通过这个方法将渲染组件 render里面的东西
    {
        return <span>1111</span>
    }
}
window.onload=function(){
var objDiv=document.getElementById("example");
    ReactDOM.render(
    <Comp/>,
    objDiv
    );
}

/* 1、定义组件-组件=class
class 名字 extend React.Component{
    render()
    {
    return <span>1111</span>
    }
}
*/

/* 2、使用组件
就跟标签一样使用
ReactDOM.render(
    return <span>1111</span>, 
    div
)

*/
</script>



</body>
</html>

二、组件是可以有属性的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">

class Comp extends React.Component{
    render() 
    {
        return <span>{this.props.name},{this.props.age}</span>//我们传的所有东西都在props里面
    }
}
window.onload=function(){
var objDiv=document.getElementById("example");
    ReactDOM.render(
    <Comp name="blue" age="18"/>,
    objDiv
    );
}
</script>

</body>
</html>

三、组件也是有事件的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">

class Comp extends React.Component{

//涉及到属性和状态   属性-钉死的、 状态-可变的

    constructor(){  //使用constructor少super出错，而且这里面如果有参数。
        super();//则和这里参数对应将 原封不动传父类
        //父类，超类，必须先完成父类的构造函数，构造工作才能够做咱们自己构造的事。
        this.state={value:''};

    }

    fn(ev)  //这里可以参数
    {
        //alert("sabr");
        //this.stat.value="abc";  像这样直接赋值是不行的
        //人家专门提供
        this.setState({
            //value:'abc'  1、可以直接赋值
            value:ev.target.value
        });

    }

    render()
    {
        return <div>
        <input type="text" onChange={this.fn.bind(this)}/>
        <span>{this.state.value}</span>
        </div>;
    }
}
window.onload=function(){
var objDiv=document.getElementById("example");
    ReactDOM.render(
    <Comp name="blue" age="18"/>,
    objDiv
    );
}

/*
    1、 状态是活的
    constructor里面-this.state={};
    方法里面-this.setState({});
*/

/*
    2、事件大小写不能乱  jsx 是要编译的  编译普遍js
    //onChange
    //onClick
*/


/*
3、绑定事件
onChange={fn}  fn是方法，不是函数
onChange={this.fn}  不对，需要bind
onChange={this.fn.bind(this)}   OK

*/

/*


*/



</script>

</body>
</html>

四、按钮显示隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
</head>
<body>

<div id="example"></div>
<script type="text/babel">

class Comp extends React.Component{

//涉及到属性和状态   属性-钉死的、 状态-可变的

    constructor(...args){  //使用constructor少super出错，而且这里面如果有参数。
        super(...args);//则和这里参数对应将 原封不动传父类
        //父类，超类，必须先完成父类的构造函数，构造工作才能够做咱们自己构造的事。
        this.state= {display:'block'};

    }

    fn()
    {
        //alert("ok");
        //this.state.display=this.state.display=='block'?'none':'block';//读可以那么多，改不能那么改
        this.setState({
            display: this.state.display=='block' ? 'none' : 'block'
        });

    }

    render()//jsx要编译原生js   所以class 要更换 className         //双括号要使用上了
    {
        return <div>
        <input type="button"  value="显示隐藏" onClick={this.fn.bind(this)}/>
        <div className="box" style={{display:this.state.display}}></div>
        </div>;
    }
}
window.onload=function(){
var objDiv=document.getElementById("example");
    ReactDOM.render(
    <Comp/>,
    objDiv
    );
}

/*
    1、 状态是活的
    constructor里面-this.state={};
    方法里面-this.setState({});
*/

/*
    2、事件大小写不能乱  jsx 是要编译的  编译普遍js
    //onChange
    //onClick
*/


/*
3、绑定事件
onChange={fn}  fn是方法，不是函数
onChange={this.fn}  不对，需要bind
onChange={this.fn.bind(this)}   OK

*/

/*


*/



</script>

</body>
</html>

五、定时器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
</head>
<body>

<div id="example"></div>
<script type="text/babel">

// Angular 霸道原生定时器、Jquery
//react 温柔-可以跟原生、jQuery配合使用
class Comp extends React.Component{

//涉及到属性和状态   属性-钉死的、 状态-可变的

    constructor(...args){  //使用constructor少super出错，而且这里面如果有参数。
        super(...args);//则和这里参数对应将 原封不动传父类
        //父类，超类，必须先完成父类的构造函数，构造工作才能够做咱们自己构造的事。
        this.state= {h:0,m:0,s:0};

        var _this=this; //这个很重要
        setInterval(function(){
            _this.tick();

        },1000);

    //this.tick();  这个不行

    }

    componentDidMount(){  //组件的声明周期  很重要
        this.tick();
    }

    tick()
    {
        var oDate=new Date();
        this.setState({
            h:oDate.getHours(),
            m:oDate.getMinutes(),
            s:oDate.getSeconds(),
        })
    }

    render()//jsx要编译原生js   所以class 要更换 className         //双括号要使用上了
    {
        return <div>
            <span>{this.state.h}:</span>
            <span>{this.state.m}:</span>
            <span>{this.state.s}</span>
        </div>;
    }
}
window.onload=function(){
var objDiv=document.getElementById("example");
    ReactDOM.render(
    <Comp/>,
    objDiv
    );
}

/*
组件生存周期
componentWillMount()//创建之前
componentDidMount()//创建之后
componentWillUpdate()//更新之前
componentDidUpdate()//更新之后
componentWillUnmount()//卸载之前

没有 componentDidUnmout()

componentWillReceiveProps()// 参数更新   这个组件得到新的参数的

*/

</script>

</body>
</html>

六、组件周期

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
        class  Comp extends React.Component{

            componentWillUnmount()
            {
                console.log("即将销毁！");
            }

            componentWillMount()
            {
                console.log("即将创建完成！");
            }
            componentDidMount()
            {
                console.log("刚刚创建完成!");
            }
            render()
            {
                return  <span>1111</span>
            }

        }


        window.onload=function(){

            var i=0;
            var objDiv=document.getElementById("example");

            document.onclick=function(){
                i++;
                if(i%2)
                {
                    ReactDOM.render(
                    <Comp/>,
                    objDiv
                    );
                }else {
                    ReactDOM.render(
                    <div>ddddd</div>,
                    objDiv
                    );
                }
            }

        }



</script>

</body>
</html>

七、重新渲染

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
        class  ChildComp extends React.Component{

            componentWillReceiveProps(){  //四、receiveprops就出来了
                console.log("参数更新了");
            }

            render()
            {
                return  <span>{this.props.name}</span>;  //三、意味着props 变了
            }

        }

        class  ParentComp extends React.Component{

            constructor(...args){
                super(...args);
                this.state={i:0};
            }

            fn()
            {
                this.setState({
                    i:this.state.i+1  //一、i只要变了
                });
            }

            render()  //导致这个从新渲染
            {
                return <div>
                <input type="button" value="aaa" onClick={this.fn.bind(this)}/>
                <ChildComp name={this.state.i} />;
                </div>;
            }


        }



        window.onload=function(){


            var objDiv=document.getElementById("example");

                    ReactDOM.render(
                    <ParentComp/>,
                    objDiv
                    );
        }

</script>

</body>
</html>

八、数据列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
        class  Item extends React.Component{
            constructor(...args){
                super(...args);
            }
            render()
            {
                return  <li>{this.props.value}</li>;
            }
        }

        class  List extends React.Component{

            constructor(...args){
                super(...args);
            }

            render()  //导致这个从新渲染
            {
                    var arr=[12,5,2,14,65];
                    var result=[];
                    for (var i = 0; i < arr.length; i++) {
                        result.push(<Item value={arr[i]} />);
                    }
                    return <ul>{result}</ul>
            }
        }

        window.onload=function(){
            var objDiv=document.getElementById("example");
                    ReactDOM.render(
                    <List/>,
                    objDiv
                    );
        }



</script>

</body>
</html>

九、数据列表动态添加

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
        class  Item extends React.Component{

            constructor(...args){
                super(...args);
            }

            render()
            {
                return  <li>{this.props.value}</li>;
            }

        }

        class  List extends React.Component{

            constructor(...args){
                super(...args);
                //this.arr=[21,31,32,43,54];
                this.state={arr:[21,32,4554,65,23]};
            }

            fn()
            {
                //this.arr.push(Math.random());
                //console.log(this.arr);

                this.setState({
                    arr:this.state.arr.concat([Math.random()])
                    //子元素必须有一个key属性
                });
            }

            render()  //导致这个从新渲染
            {
                    var arr=this.state.arr;
                    var result=[];
                    for (var i = 0; i < arr.length; i++) {
                        result.push(<Item key={i} value={arr[i]} />);//为了比较元素使用 是否修改了
                    }
                    return <ul><input type="button" value="按钮" onClick={this.fn.bind(this)}/>{result}</ul>
            }

        }



        window.onload=function(){

            var objDiv=document.getElementById("example");

                    ReactDOM.render(
                    <List/>,
                    objDiv
                    );
        }
</script>

</body>
</html>

十一、组件内节点操作

1、组件、状态
2、组件内节点
ref=”类似id”
this.refs[‘名字’]=>原生

这里写图片描述

十二、小坑

1、

2、

十三、组件通信
1、父级传子级

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
        class  Child extends React.Component{

            constructor(...args){
                super(...args);
            }

            render()
            {
                return  <div>{this.props.a}</div>;
            }

        }

        class  Parent extends React.Component{
            constructor(...args){
                super(...args);
                //this.arr=[21,31,32,43,54];
                this.a=12;
            }

            render()  //导致这个从新渲染
            {
                    return <div>
                                    <div>aaa</div>
                                    <Child a={this.a} />
                                    <div>bbb</div>
                                </div>
            }
        }

        $(function(){

            var objDiv=document.getElementById("example");
            ReactDOM.render(
                <Parent />,
                objDiv
            );

        })

</script>

</body>
</html>

2、子传父

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
        class  Child extends React.Component{

            constructor(...args){
                super(...args);
                this.num=55; //二、在子里面设置值准备传父那里
            }

            render()
            {
                //alert(this.props.cb);
                this.props.cb(this.num); //三、获取回调函数 并执行
                return  <div>{this.props.a}</div>;
            }

        }

        class  Parent extends React.Component{
            constructor(...args){
                super(...args);
                //this.arr=[21,31,32,43,54];
                this.a=12;
            }

            //一、子级传父  设置回调函数   就是传一个回调获取

            fn(num)
            {
                    alert("cb成功"+num);
            }

            render()  //导致这个从新渲染
            {
                    return <div>
                                    <div>aaa</div>
                                    <Child cb={this.fn.bind(this)} />
                                    <div>bbb</div>
                                </div>
            }
        }

        $(function(){

            var objDiv=document.getElementById("example");
            ReactDOM.render(
                <Parent />,
                objDiv
            );

        })

</script>

</body>
</html>

十二、webpack
1、babel实时编译慢。
2、测试。
3、自己搭建服务器。
4、热更新。

1、配置：
cnpm install -g webpack #webpac的cli环境。
cnpm install -g webpack-dev-server #webpakc自带的服务器。
2、各种依赖库。
cnpm install babel-core -D #后台编译babel工具
cnpm install babel-preset-es2015 -D #babel对ES2015的预设
cnpm install babel-loader -D #babel加载器

#webpack本身
cnpm install webpack -D #webpack本地依赖库
cnpm install webpack-dev-server -D #webpack服务器的本地依赖

cnmp install babel-preset-react -D #babel-react预设
cnpm install react -D #react本身

cnpm install react-dom -D #react-dom 本身

cnpm install react-hot-loader -D #热更新过

cnpm install style-loader -D
cnpm install css-loader -D

// 要不然 cnpm install #全部装

十二、组件样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<style>
  .pStyle{
    font-size: 14px;
    color: red }
</style>
<body>

<div id="example"></div>
<script type="text/babel">

var hStyle={
  backgroundColor:'green',
  color:"red"
}
class Comp extends React.Component{   // 1、创建组件
    render()
    {
      //一、return语句和返回元素不在同一行会被解析器视为返回null导致错误（注意：如果没有使用()的情况）
      //二、render()函数中返回的所有元素需要包裹在一个"根"元素里面
      //三、注释不可以放return中 否则直接返回

      //内联样式      对象样式    选择器样式

      return <div>
      <span style={{backgroundColor:'red',color:'white',fontSize:40}}>sadadsads</span>
      <span style={{backgroundColor:'red',color:'white',fontSize:40}}>sadadsads</span>
      <span style={hStyle}>sadadsads</span>
      <span className="pStyle"> ssdada</span>
      </div>
        //

    }
}

window.onload=function(){
var objDiv=document.getElementById("example");
    ReactDOM.render(
    <Comp/>,
    objDiv
    );
}
</script>

</body>
</html>

十三、内联样式



//一、在js 文件内写。 //外链样式

import React,{Component} from 'react';

//二、定义组件
var LessonStyle=React.createClass({
  render:function(){
    return (
      <View style={styles.container}>
          <View style={top}>
          </View>
      </View>
    )
  }

});

//三、定义样式
var styles=StyleSheet.create({
  //层view
  container:{
    backgroundColor: "red",  //中间没有横杆 脱空命名法
    width:300,
    height:400,
  },
  top:{
    backgroundColor:"green",
    width:300,
    height:400,
  }
});

//四多个样式的使用 {[style.container,style.top,{backgroundColor:"red"}]}

猜你喜欢