React 面向组件编程-【React篇2】

React 面向组件编程

• React developer tools （开发者工具）

1. Components：可查看页面使用了哪些组件
2. Profiler ：可以看见组件加载的时间 用于调节组件的加载效率

• 函数式组件

    <script type="text/babel">
        //1. 创建函数式组件 
        function MyComponent(){
            console.log(this) // 此处的this是undefined，因为babel编译后开启了严格模式
            return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
        }
       // 2.渲染组件到页面
       ReactDOM.render(<MyComponent/>,document.getElementById('test'))
       /*
        执行了ReactDOM.render(<MyComponent/>...之后发生了什么？
            1. React解析组件标签，找到了MyComponent组件
            2. 发现组件是使用函数式定义的 随后调用该函数，将返回的虚拟DOM转为真实DOM,随后呈现在页面中
       */
    </script>

类的基本使用

​ 总结：

​ 1.类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时矛与。

​ 2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。

​ 3.类中所定义的方法，都是放在了类的原型对象上，供实例使用

​ 示例：

    <script type="text/javascript">
        //1. 创建一个Person类
        class Person {
            // 构造方法
            constructor(name, age) {
                // 构造器中的this是谁 --类的实例对象
                this.name = name
                this.age = age
            }
            // 一般方法
            speak() {
                // speak方法放在了哪里？ --类的原型对象上，供实例使用
                // 通过Person实例调用speak时，speak中的this就是Person实例
                console.log(`我叫${name}，我的年龄是${age}`)
            }
        }

        class Student extends Person {
            constructor(name, age, grade) {
                super(name, age)
                this.grade = grade
            }
            speak() {
                // speak方法放在了哪里？ --类的原型对象上，供实例使用
                // 通过Student实例调用speak时，speak中的this就是Student实例
                console.log(`我叫${name}，我的年龄是${age}，我的年纪是${grade}`)
            }
            study() {
                console.log(`我很努力的学习`)
            }
        }
        const t1 = new Student('小张', 14, '高一')
        console.log(t1)
        t1.study()
    </script>

类式组件

    <script type="text/babel">
        //1. 创建类式组件 
        class MyComponent extends React.Component{
            render(){
                // render是放在哪里？--MyComponent的原型对象上，供实例使用
                // render中的this？--MyComponent的实例对象<=> MyComponent组件实例对象
                console.log('render中的this：',this);
                return  <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
            }
        }
         // 2.渲染组件到页面
        React.render(<MyComponent/>,document.getElementById('test'))
        /*
        执行了ReactDOM.render(<MyComponent/>...之后发生了什么？
            1. React解析组件标签，找到了MyComponent组件
            2. 发现组件是使用函数式定义的 随后new出来该类的实例，并通过该实例调用原型对象的render方法
            3.将render返回的虚拟DOM转为真实DOM，呈现在页面中
       */
    </script>

组件实例的三大核心属性1：state

​ 范围：只适用类式组件 ，函数式组件可以hooks实现

​ state用法和事件绑定 bind方法解决changeWether中this指向问题 示例：

    <script type="text/babel">
        //1. 创建组件
        class Weather extends React.Component {
            constructor(props) {
                super(props)
                // 初始状态
                this.state = { isHot: true }
                // 解决changeWether中this指向问题
                this.changeWether = this.changeWether.bind(this)
            }
            render() {
                const {isHot} = this.state
                //事件绑定 下面这个onClick注意C是大写
                return <h1> onClick={this.changeWether = this.changeWether.bind(this)
                }今天天气很{isHot ? '炎热' : '凉爽'}</h1>
            }
            changeWether() {
                // changeWether放在哪里？--weather的原型对象上，供实例使用
                // 由于changeWether是作用在onClick的回调，所以不是通过实例调用的，是直接调用
                // 类中的方法默认开启了局部的严格模式，所以changeWether中的this是undefined
                console.log(this)
            }
        }
        // 2.渲染组件到页面  
        ReactDOM.render(<Weather />, document.getElementById('test'))
    </script>

bind方法解决changeWether中this指向问题 ：

state状态值的修改: setState

    <script type="text/babel">
        //1. 创建组件
        class Weather extends React.Component {
            // 构造器调用多少次？ --1次
            constructor(props) {
                super(props)
                // 初始状态state
                this.state = { isHot: true, wind: '微风' }
                // 解决changeWether中this指向问题
                this.changeWether = this.changeWether.bind(this)
            }
            
            // render调用多少次？ --1+n次 ：初始化+状态跟新次数
            render() {
                const { isHot } = this.state
                //事件绑定 下面这个onClick注意C是大写
                return <h1> onClick={this.changeWether = this.changeWether.bind(this)
                }今天天气很{isHot ? '炎热' : '凉爽'}</h1>
            }
            
            // changeWether调用多少次？ --n次 状态跟新的次数
            changeWether() {
                // changeWether放在哪里？--weather的原型对象上，供实例使用
                // 由于changeWether是作用在onClick的回调，所以不是通过实例调用的，是直接调用
                // 类中的方法默认开启了局部的严格模式，所以changeWether中的this是undefined
                console.log(this)

                // 获取原来isHot值
                const isHot = this.state.isHot
                // 严重注意：状态必须通过setState进行更新，且更新是一种合并，不是替换
                this.setState({ isHot: !isHot })

                // this.state.isHot = !isHot // 这是错误写法
            }
        }
        // 2.渲染组件到页面  
        ReactDOM.render(<Weather />, document.getElementById('test'))

    </script>

state的简写方式 示例：

    <script type="text/babel">
        //1. 创建组件
        class Weather extends React.Component {
            // 初始化状态 这里将组件的对象上添加一个属性state
            state = { isHot: true, wind: '微风' }

            render() {
                const { isHot } = this.state
                return <h1> onClick={this.changeWether = this.changeWether.bind(this)
                }今天天气很{isHot ? '炎热' : '凉爽'}</h1>
            }
            // 自定义方法 --要用赋值语句的形式+箭头函数
            // 将原型对象上的changeWether放在组件对象上
            // 箭头函数没有自己的this 这里面是外层函数的this，就是指组件实例对象
            changeWether = () => {
                const isHot = this.state.isHot
                this.setState({ isHot: !isHot })
            }
        }
        // 2.渲染组件到页面  
        ReactDOM.render(<Weather />, document.getElementById('test'))

    </script>

组件实例的三大核心属性1：state 总结：

• 组件中render方法中的this为组件实例对象

• 组件自定义的方法中this为undefined，如何解决？

  1. 强制绑定this：通过函数对象的bind()

  2. 箭头函数

• 状态数据，不能直接修改更新 要使用setState

最后 谢谢阅读此篇 《React 面向组件编程》-【React篇2】
🥇个人主页：500佰 欢迎留言