星伴同行

千里之行，始于脚下;会当凌绝顶，一览众山小。

React系列（二）组件及State

一、React开发者工具安装和使用

1.1 React开发者工具的安装

打开谷歌浏览器－－>扩展程序－－－>google应用商店，安装React开发者工具，要注意是Facebook公司的

1.2 React开发者工具的使用

Components：组件列表
Profiler:记录加载的性能

PHP&前端、基础技术React系列（二）组件及State插图

二、组件

2.1 组件的定义

React的组件有两种：

  1. 函数式组件
  2. 类式组件

2.2 函数式组件

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!--引入React 核心库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <!--引入React-dom 用于支持React操作DOM-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--引入babel 用于Jsx转换称js-->
    <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        //1、创建一个函数式组件
        function MyComponent(){
            console.log(this); //此处的this是undefined，因为Babel编译后开启了严格模式
            return <h2>我是函数式组件，用于简单的组件</h2>
        }
        //2、创建一个组件虚拟的DOM
        const VDOM = <MyComponent/>
        //3、渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
        /*
        1、React 解析组件<MyCommponment/>
        2、发现组件是函数式定义，随后调用该函数，返回虚拟的DOM
        3、虚拟的DOM转为真实的DOM，随后呈现在页面中
        */
    </script>
</body>
</html>

注意函数式组建只能适用于简单组件使用。

2.3 类式组件

2.3.1 Js类的例子

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <script type="text/javascript">
        //创建一个Person类
        class Person{
            //构造器方法，用于初始化
            constructor(name,age){
                //构造器的中的this 是类的实例对象
                this.name=name;
                this.age=age;
            }
            //一般方法
            speak(sex){
                //通过Person实例调用speak，这里的this就是Person实例
                console.log(`我叫${this.name},性别${sex},我的年龄是${this.age}`)
            }
        }
        //创建一个Person的实例对象
        const p1 = new Person('tom',12)
        const p2 = new Person('mike',19)
        p1.speak('男')

        p2.speak('女')

    </script>
</body>
</html>
<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <script type="text/javascript">
        //创建一个Person类
        class Person{
            //构造器方法，用于初始化
            constructor(name,age){
                //构造器的中的this 是类的实例对象
                this.name=name;
                this.age=age;
            }
            //一般方法
            speak(sex){
                //通过Person实例调用speak，这里的this就是Person实例
                console.log(`我叫${this.name},性别${sex},我的年龄是${this.age}`)
            }
            study(){
                console.log("好好学习，天天向上")
            }
        }
        //创建一个学生类集成Person
        class Student extends Person{
            constructor(name,age,grade){
                super(name,age);
                this.grade=grade
            }
            //重写从父类继承过来的方法
            speak(){
                console.log(`我叫${this.name},${this.grade}年纪,我的年龄是${this.age}`)
            }
        }
  
        const s1 = new Student('tom',19,'高一')
        s1.speak()
        s1.study()

    </script>
</body>
</html>

类式组件例子

1、类的构造时不是必须写，当需要进行初始化的时候才写
2、如果A继承了B类，在A类需要写上构造器的话，必须用super调用

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!--引入React 核心库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <!--引入React-dom 用于支持React操作DOM-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--引入babel 用于Jsx转换称js-->
    <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        //1、创建一个类式组件
        
        class MyComponent2 extends React.Component{
            render(){
               
                //render中的this，是Mycomponment2的实例对象
                console.log("render中的this:",this)
                return <h2>我是类式组件，适用于复杂组件定义</h2>
            }
        }
        //2、创建一个组件虚拟的DOM
        const VDOM = <MyComponent2/>
        //3、渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
        /*
        1、React 解析组件<MyCommponment/>
        2、发现组件是类式定义，随后进行实例化，调用里面上的render，返回虚拟的DOM
        3、虚拟的DOM转为真实的DOM，随后呈现在页面中
        */
    </script>
</body>
</html>

通过对比，类似组件可以调用this,有状态,可做成复杂组件

三、状态State

不推荐例子，但兼容性强：不可能每增加一个函数对增加this.xxx=this.xxx.bind(this);

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!--引入React 核心库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <!--引入React-dom 用于支持React操作DOM-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--引入babel 用于Jsx转换称js-->
    <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        //1、创建一个类式组件
        
        class Weacher extends React.Component{

            constructor(props){
                super(props)
                this.state ={isHot:false,wind:"微风"}
                //解决changeWeather中的this指向问题，解决函数中console.log(this) 输出undefined
                this.changeWeather = this.changeWeather.bind(this)
            }

            render(){
               //读取状态
               const{isHot,wind}=this.state
                return <h2 onClick={this.changeWeather}>今天的天气很{isHot?'炎热':'凉爽'}，{wind}</h2>
            }

            changeWeather(){
                console.log(this.state)
                const isHot = this.state.isHot
                this.setState({
                    isHot:!isHot
                })
            }
        }
        //2、创建一个组件虚拟的DOM
        const VDOM = <Weacher/>
        //3、渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
        /*
        1、React 解析组件<MyCommponment/>
        2、发现组件是类式定义，随后进行实例化，调用里面上的render，返回虚拟的DOM
        3、虚拟的DOM转为真实的DOM，随后呈现在页面中
        */
    </script>
</body>
</html>

优化例子（存在浏览器兼容问题）

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!--引入React 核心库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <!--引入React-dom 用于支持React操作DOM-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--引入babel 用于Jsx转换称js-->
    <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        //1、创建一个类式组件
        
        class Weacher extends React.Component{

           state = {isHot:false,wind:'微风'}

            render(){
               //读取状态
               const{isHot,wind}=this.state
                return <h2 onClick={this.changeWeather}>今天的天气很{isHot?'炎热':'凉爽'}，{wind}</h2>
            }

            changeWeather = ()=>{
                console.log(this.state)
                const isHot = this.state.isHot
                this.setState({
                    isHot:!isHot
                })
            }
        }
        //2、创建一个组件虚拟的DOM
        const VDOM = <Weacher/>
        //3、渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
        /*
        1、React 解析组件<MyCommponment/>
        2、发现组件是类式定义，随后进行实例化，调用里面上的render，返回虚拟的DOM
        3、虚拟的DOM转为真实的DOM，随后呈现在页面中
        */

    </script>
</body>
</html>

如果需要在changeWeather中传参

<!Doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!--引入React 核心库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <!--引入React-dom 用于支持React操作DOM-->
    <script type="text/javascript" src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--引入babel 用于Jsx转换称js-->
    <script type="text/javascript" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        //1、创建一个类式组件
        
        class Weacher extends React.Component{

           state = {isHot:false,wind:'微风'}

            render(){
               //读取状态
               const{isHot,wind}=this.state
                return <h2 onClick={(event) => this.changeWeather(event, "加大风力")}>今天的天气很{isHot?'炎热':'凉爽'}，{wind}</h2>
            }

            changeWeather = (event,wind)=>{
                console.log(this.state)
                const isHot = this.state.isHot
                this.setState({
                    isHot:!isHot,
                    wind
                })
            }
        }
        //2、创建一个组件虚拟的DOM
        const VDOM = <Weacher/>
        //3、渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
        /*
        1、React 解析组件<MyCommponment/>
        2、发现组件是类式定义，随后进行实例化，调用里面上的render，返回虚拟的DOM
        3、虚拟的DOM转为真实的DOM，随后呈现在页面中
        */

    </script>
</body>
</html>
打赏微海报分享