React学习(4)-理清React的工作方式

• React相比于原生JS,JQ编程方式,究竟有什么区别？
• React的工作方式是什么样子的?所谓的虚拟DOM又指的是什么?
• React的工作方式的优点有哪些？

我们先看一个加减数字框组件,具体效果如下所示,分别通过原生JS和JQ是怎么实现的

元素(JSX)是构成React应用的最小砖块,它描述了你在在屏幕上看到的UI内容

与浏览器的DOM元素不同,React元素时创建开销极小的普通对象,并不会跟原生操作DOM一样,影响整个DOM的重绘渲染,React DOM会负责更新DOM与React元素保持一致

React只更新它需要更新的部分,React DOM会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新,例如:如下示例

具体代码如下所示

import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';

function tick() {
const element = (
  <Fragment>
    <div style = {{ textAlign: 'center' }}>
      <h1>欢迎关注微信itclancoder公众号</h1>
      <p>现在北京时间是 { new Date().toLocaleTimeString() }</p>
    </div>
  </Fragment>
);

const container = document.getElementById('root');

ReactDOM.render(element, container);

}

setInterval(tick, 1000);

当然,我们可以对它进一步的优化,写成一个组件,如下所示:

import React, {  Fragment, Component } from 'react';      
import ReactDOM from 'react-dom'; 


class Clock extends Component {
  constructor(props) {
    super(props);


    this.state = {
       date: new Date()
    }


  }


  render() {
    return (
       <Fragment>
            <div style = {{ textAlign: "center" }}>
                <h1>欢迎关注微信itclanCoder公众号</h1>
                <p>现在是北京时间:{ this.state.date.toLocaleTimeString() }</p>
            </div>
       </Fragment>
    );
  }


 // 生命周期函数,组件挂载时自动执行这个方法,组件已经被渲染到 DOM 中后运行
  componentDidMount() {
    this.timer = setInterval(() => {
      this.tick()
    }, 1000)
  }
  // 组件卸载时,清除定时器
  componentWillUnmount(){
    clearInterval(this.timer);
  }


  tick() {
    this.setState({
      date: new Date()
    })
  }
}


const container = document.getElementById('root');

ReactDOM.render(<Clock  />, container);

对于上面的代码,涉及到初始化state状态数据,以及componentDidMount和componentWillUnmount两个生命周期函数

在组件挂载时设置一个定时器函数,自动更新时间,在组件卸载时,清除定时器,通过setState这个方法,实时更新state数据。更多相关state以及props,生命周期的知识,暂时知道这么用就可以了,后续会有更详细的内容介绍的​

尽管每一秒我们都会新建一个描述整个 UI 树的元素,但是React DOM 只会更新实际改变了的内容，也就是上面中的文本节点

这是因为React利用Virtual DOM,让每次渲染都只重新渲染最少的DOM元素

而操作DOM会引起整个浏览器对网页进行重排重绘。

DOM树是对HTML的抽象,而vitrtual DOM就是对DOM树的抽象,虚拟DOM不会触及浏览器,虚拟DOM本质上就是javascript对象,还记得前面说过的JSX是React.createElement()方法的一个语法糖?

它是存在于javascript空间树形结构,每次自上而下渲染React组件时,会对比这一次产生的virtual DOM和上一次渲染的virtual DOM,对比就会发现差别,然后修改真正的DOM树时就只需要修改中的部分就可以了的

在没有组件化React,Vue,Angular之前,毫无疑问,JQ是最直观易懂的,但是当项目逐渐变得复杂庞大时,用JQ写出来的代码耦合度就没那么高了的,正是这样,也就诞生了一些requirejs以及Seajs解决一些问题,但是使用JQ写出来的代码往往互相纠缠 如下图所示

使用React的方式,就可以避免构建这样复杂的程序结构,无论何种事件,引发的都是React组件的重新渲染,它只会修改数据变化的的DOM部分,并不需要去关心怎么去操作DOM

如下图所示

在React中，对JSX元素上添加事件,是通过on*EventType 这种内联方式添加的,不需要手动调用浏览器原生的 addEventListener 进行事件监听,在React中,它已经帮我们封装好了一些事件类型属性（onClick,onChange,onFocus,obBlur等）

当需要给某个JSX元素监听事件的时候,只需要通过内联方式,在React元素上加on*EventType就可以了,注意这里事件类型的写法,驼峰式命名法

也无需考虑浏览器的兼容性,这里要格外注意的是,这些 on*EventType的事件监听只能用在普通的 HTML 的标签上（div,input,p,a等原生浏览器支持的标签），而不能用在组件标签上。也就是说， <Button onClick={…} /> 这样的写法是不起作用的

如果想要在组件标签上监听事件起作用,也可以做到,就是结合第三方模块styled-components样式组件进行使用,是可以做到的,更多内容,你可以参考官网https://styled-components.com

这里简单提一下:

• 终端里,安装styled-components: npm install --save styled-components
• 在文件中引入styled-components模块
• 样式组件定义使用,如下所示

import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';
import styled from "styled-comonents"; // 引入styled-components模块,并引入了styled这个变量对象
// 样式化组件定义
export const Button = styled.button`
  outline:none;
`
// class Button extends Component {

// render() {
// return (
// <button>按钮</button>
// );

// }

// }
class CountNum extends Component {
    constructor(props) {
    super(props);

    this.state = {
      inputVal: 0
    }
}

render() {
return (
   <div style = {{ textAlign: "center", marginTop: "50px"}}>
     <button onClick = { this.handleClickReduce.bind(this) }>-</button>
     <input style = {{ textAlign: "center"}} value = { this.state.inputVal } onChange = { this.handleInputChange.bind(this) } />
     <button onClick = { this.handleCLickAdd }>+</button>
     <Button onClick = { this.handleBtnClick.bind(this) }>按钮</Button>
</div>
);
}

handleBtnClick() {
  alert("我是样式组件,简直帅呆了");
}

handleCLickAdd = () => {
   this.setState({
     inputVal: this.state.inputVal+1
   });
}

// handleCLickAdd(){
// this.setState({
// inputVal: this.state.inputVal+1 
// })
// }

handleClickReduce() {
  this.setState({
  inputVal: this.state.inputVal-1
 })
}

handleInputChange(e) {
  let changeVal = e.target.value;
    this.setState({
      inputVal: changeVal++
    });
 }
}


const container = document.getElementById('root');

ReactDOM.render(<CountNum />, container);

具体效果如下所示

React的编程模式是函数式编程来解决用户界面渲染问题的,也称为面向数据编程，一切皆是JS,基于组件开发模式,这在以后的React编码中将会体会越来越深



本文主要从一个简单的React数字框组件应用开始,分别用原生JS,JQ,React进行了实现,在React中UI视图取决于render函数返回的内容,数据是什么,就让页面显示什么,无需关注DOM操作,并且React引入了虚拟DOM

它是对DOM树的一种抽象,本质上就是一js对象,当进行视图的改变时,当React的子元素内容发生改变时,并不会引起整个浏览器的重绘和重排,只会更改变化的数据部分,并且在给JSX添加事件监听时,使用on*EnentType的方式

并且这种事件的监听,它只作用于原生HTML元素上,若放在自定义的组件上时,是不起作用的,具体解决办法,可以引入第三方styled-components模块的,后续单独拿一篇幅来说也不为过的,涉及到的知识还是挺多的