（React 框架）React技术

1、简介  

　　React 是Facebook 开发并开源的前端框架

　　当时他们的团队在市面上没找到合适的MVC 框架，就自己写一个 JS 框架，用来架设 instagram（图片分享社交网路），2013年开源

　　React 解决的是前端MVC 框架中的view 视图层的问题。

2、Virual DOM

　　DOM（文档对象模型Document Object Model）

　　　

　　　　

　　将网页内所有内容映射到一颗树形结构的层级对象模型上，浏览器提供对DOM的支持，用户可以是用脚本调用DOM API 来动态的修改DOM 结点，从而达到修改网页的目的，这种修改是浏览器中完成的，浏览器会根据DOM 的改变重绘 改变DOM 结点部分。

　　修改DOM 重新渲染代价太高，前端框架为了提高效率，尽量减少DOM 的重绘，提出了Virtual DOM，所有的修改都是在现在的Cirtual DOM 上完成的，通过比较算法，找出浏览器DOM 之间的差异，使用这个差操作DOM，浏览器只需要渲染这部分变化就行了

　　React 实现了DOM Diff 算法，可以高效的对比Virtual DOM 和DOM 之间的差异。

3、支持JSX 语法

　　jsx 是 一种JavaScript 和XML 混写的语法，是JavaScript的扩展

　　XML 被设计为传输和存储数据,其焦点是数据的内容。 HTML 被设计用来显示数据,其焦点是数据的外观

　　

4、测试程序　

　　修改 /src/index.js:　

　　　　

　　修改 根目录下的 index.html：在html文件中，提供一个div标签，同时提供id ，使得react可以通过id找到

 　　　　

　　启动 npm start 后

　　　　   

　　　　

　　程序解释：

　　　　

　　　　import React from "react";  导入 react 模块

　　　　import ReactDom  from "react-dom"；导入react 的DOM 模块

　　　　class Root extends React.Component ：组件类定义，从React.Component 类上继承，这个类生成JSXElement对象即React元素。

　　　　render（）渲染函数，返回组件中渲染的内容，注意，只能返回唯一一个顶级元素回去　　　　　　　　　　　　

　　　　ReactDom.render（<Root/>, document.getElementById("root"））：第一个参数是JSXElement对象，第二个是DOM的Element元素，将React元素添加到DOM的Element 元素中并渲染。　也可以使用name，如果Element元素的属性定义了name，document.getElementsByName("newroot")

　　　　（不推荐使用）还可以使用React.createElement创建react元素，第一参数是react组件或者一个HTML的标签明后才能（如：div，span）　

 　　　　

　　增加一个子元素：　（这就是SPA网页，单页应用，普通的爬虫就只能爬基本页面了，因为此时，css和js分割开了）　图二是 DOM数，虚拟DOM 是react的事　　　

 　　　　  

　　　　注意：

1. 1. React组件的render函数return ，只能是一个顶级元素
   2. JSX语法是XML，要求所有元素必须闭合，注意<br />

 　　　　JSX 规范：

• • • 约定标签中首字符小写就是html标记，首字母大写就是组件
    • 要求严格的HTML标记，要求所有标签都必须是闭合的，br也应该写成<br /> ，/ 前留一个空格
    • 单行省略小括号，多行使用小括号
    • 元素有嵌套，建议多行，注意缩进
    • JSX表达式：表达式使用{ } 括起来，如果大括号内使用了引号，会当做字符串处理，例如 <div>{'2>1?true:fase'}</div>　　

 　　　　　　　　

5、组件状态 state 

　　每一个 React组件 都有一个状态属性 state，它是一个JavaScript对象，可以为他定义属性来保存值

　　如果状态变化了，会触发UI 的重新渲染，使用setState(）方法可以修改stste值

　　注意：state是每个组件自己内部使用的，是组件自己的属性

　　依然修改/src/index.js

　　　　

　　　　解决方式1：

　　　　　　  

 　　　　　　可以使用延时函数，setTimeout（（）=> this.setState({ p1: ' jerry' })， 3000）  是一个异步函数

　　　　　　但是 不要这样使用，把setState放在别的地方　　　　　　

　　　　　　setInterval（） 每几秒，执行一次，而 setTimeout 多少秒后，执行一次

　　复杂状态的例子　　

　　　　

　　　　浏览器结果：

　　　　   ========》点击后

　　　　

　　　　　　　　　　　　　　div的id 是t1 ，鼠标按下事件捆绑了一个函数，只要鼠标按下就出触发调用 getEventTrigger 函数，浏览器会送给他一个参数 event， event是事件对象，当事件触发时，event 包含触发这个时间的对象

　　HTML DOM的JavaScript 事件

　　　　　　

　　　　　　

　　　　使用React 实现上面的传统的HTML

　　　　　　

　　　　　　

　　　　分析：

　　　　　　Toggle类

　　　　　　　　它有自己的state属性

　　　　　　　　当render完成后，网页上有一个div标签，div标签对象捆绑了一个click 时间的处理函数，div标签内有文本内容

　　　　　　　　如果通过点击左键，即触发了一个click方法关联的handleClick 函数，在这个函数里将状态改变

　　　　　　　　状态值state，的改变 将引发render重绘

　　　　　　　　如果组件自己的state变了，只会触发自己的render方法重绘。　　

　　　　注意：

　　　　　　{this.handleClick.bind(this)} 不能外加括号

　　　　　　this.handleClick.bind(this) 一定要绑定this，否则当触发捆绑的函数时，this是函数执行的上下文决定的，this已经不是触发事件的对象了。

　　　　　　console.log(event.target.id) 取回的产生的对象的id，但是这不是我们封装的组件对象，所以

　　　　　　console.log(event.target ===this) 是false，所以这里一定要使用this，而这个this是通过绑定来的

　　　　　　event.target 就是生成的一个块 <div>-----</div>

　　　　React中的事件：

　　　　　　使用小驼峰

　　　　　　使用JSX表达式，表达式中指定事件处理函数

　　　　　　不能使用return false 如果要组织事件默认行为，使用event。preventDefault()　　

　　

6、属性props：

　　props 就是组件的属性properties。

　　把React组件当作标签使用，可以为其增加属性，如下：

　　　　<Toggle name="school" parent={this} />

　　为上面的Toggle 元素增加属性：

1. 1. name="school" ,这个属性 会作为一个单一的对象传递给组件，加入到组件的porps 属性中
   2. parent = {this} 注意这个this是在Root 元素中，指的是Root组件本身
   3. 在Root中为使用JSX 语法为Toggle 增加子元素，这些子元素也会被加入到Toggle组件的props.childern中

　　　　　　

　　　　　　尝试修改props 的属性值，会抛出 TypeError：cannot assign to read only property “name” of object # <Object>异常

　　　　　　　　应该说， state是私有 private 的属于组件自己的属性，组件外无法直接访问，可以修改state但是建议使用setState方法

　　　　　　　　props是公有public属性组件外也可以访问，但是只读。

　　　　　　

7、构造器constructor：

　　使用ES 6 的构造器，要提供一个参数props， 并把这个参数使用super传递给父类

　　  

　　

8、组件的生命周期：

　　组件的生命周期可分为三个状态

• • Mounting :已 插入真实的DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实的DOM

　　组件的生命周期状态，说明在不同时机访问 组件，组件正在处于生命周期的不同转台上

　　在不同的生命周期状态访问，就产生不同的方法。

• • 装载组件触发
    • componentWillMOunt 在渲染前调用， 在客户端---也在服务端。只会在装载之前调用一次。
    • componentDidMount 在第一次渲染后调用，只在客户端，之后组件已经生成了对应的DOM 结构可以通过this.getDOMNode（）来进行访问，如果你想和其他JS 框架一起使用，可以在这个方法中调用setTimeout，setInterval或者发送AJAX 请求等操作（防止异步操作阻塞UI），只在装载完成后调用一次，在render之后
  • 更新组件触发，这些方法不会再首次render组件的周期调用
    • componentWillReceiveProps（nextProps）在组件接收到一个新的prop的时候，调用，这个方法在初始化render时不会被调用
    • shouldComponentUpdate（nextProps，nextState）返回一个布尔值，组件接收到新的props或者state时被调用，在初始化时或者使用forceUpdate时不会被调用
      • 可以在你确认不需要更新组件时 使用
      • 如果设置为false，就是不允许更新组件，那么componentWillUpdate，componentDidupdate不会执行　　
    • componentWillUpdate(nextProps, nextState) 在组件接收到新的props或者state但还没有render时被调用，在初始化时不会被调用
    • componentDidUpdate（prevProps，prevState）在组件完成更新后立即被调用，在初始化时不会被调用　　　　　　　　
  • 卸载组件触发
    • componentWillUnmount 在组件从DOM中移除的时候，立即被调用

　　　　　　　　　　

　　　　有图可知：

　　　　　　constructor 构造器是最早执行的函数

　　　　　　触发更新生命周期函数，需要更新 state 或 props

　　　　　　因此，重写编写 /scr/index.js

　　　　　　构造两个组件，在子组件SUb中，加入所有生命周期函数

　　　　测试：装载，卸载组件的生命周期函数。　　　　

import React from 'react';
import ReactDom from 'react-dom';


class Sub extends React.Component {
  constructor (props){
    console.log("sub constructor")
    super(props);
    this.state = {count:0};
  }
  handleClick(event) {
    this.setState({count:this.state.count + 1});
  }
  render() {
    console.log('sub render');
    return (
      <div id="sub" onClick={this.handleClick.bind(this)}>
        Sub's count = {this.state.count}
      </div>
    );
  }

  componentWillMount() {
    console.log('sub componentwillmont')
  }

  componentDidMount() {
    console.log('sub componentdidmount')
  }
  componentWillUnmount(){
    console.log('sub componentdidunmount')
  }


}


class Root extends React.Component{
  constructor (props) {
    console.log("root constructor")
    super(props);
    this.state = {};

  }
  render (){
    return(
     <div>
      <Sub />
    </div>
    )
  }
}

ReactDom.render(<Root/>, document.getElementById("newroot"));

 　　结果：

         

 　　　　增加，更新组件函数：

　　　　　演示 props的改变，为Root增加一个click事件处理函数　

import React from 'react';
import ReactDom from 'react-dom';
import { runInAction } from 'mobx';


class Sub extends React.Component {
  constructor (props){
    console.log("sub constructor")
    super(props);
    this.state = {count:0};
  }
  handleClick(event) {
    this.setState({count:this.state.count + 1});
  }
  render() {
    console.log('sub render');
    return (
      <div style={{height:200 + "px", color:'red', backgroundColor:"#aaffff"}}>
        <a id='sub' onClick={this.handleClick.bind(this)}>
          sub'x count = {this.state.cont}
        </a>
      </div>
    );
  }

  componentWillMount() {
    //constructor 之后，第一次render之前
    console.log('sub componentwillmont')
  }

  componentDidMount() {
    // 第一次render之前
    console.log('sub componentdidmount')
  }
  componentWillUnmount(){
    //清理工作
    console.log('sub componentdidunmount')
  }

  componentWillReceiveProps(nexProps) {
    // props更新时，街道新的props，交给shouldComponentUpdate
    // props组件内只读，只能从外部改变
    console.log(this.props)
    console.log(nexProps)
    console.log('sub com---receiveProps', this.state.count)
  }

  shouldComponentUpdate(nexProps, nextState) {
    // 是否组件更新，props 或state 方式改变，返回布尔值，true才会更新
    console.log('sub shuold--------', this.state.count, nextState)
    return true

  }

  componentWillUpdate(nexProps, nextState) {
    //同意更新后，真正更新前，之后调用rener
    console.log('will update', this.state.count, nextState)
  }

  componentDidUpdate(prevProps, prevState){
    //同意更新后，真正更新后，在render在之后调用
    console.log('did Update', this.state.count, prevState)
  }

}


class Root extends React.Component{
  constructor (props) {
    console.log("root constructor")
    super(props);
    this.state = {flag:true, name:'root'};

  }
  handleClick(event){
    this.setState({
      flag:!this.state.flag,
      name:this.state.flag ? this.state.name.toLowerCase() : this.state.name.toUpperCase()
    })
  }
  render (){
    return(
     <div id='t1' onClick={this.handleClick.bind(this)}>
      my name is {this.state.name}
      <Sub /> {/* 父组件的render，会引起下一级组件的更新流程，导致props重新发送，即使子组件props没有改变*/}
    </div>
    )
  }
}

ReactDom.render(<Root/>, document.getElementById("newroot"));

 　　componentWillMount 第一次装载，在首次render之前，例如控制state，props

　　conpinentDidMount 第一次装载结束，在首次render之后，

 　　

注：++ 原位置自动加1 ，+= 是调到栈里，加1 再返回

 10、无状态组件

 　　React从15.0 开始支持无状态组件，定义如下：

　　　　

 　　无状态组件，也叫函数式组件

 　　开发中，很多情况下，组件其实很简单，不需要state状态，也不需要使用生命周期函数，无状态组件很好的满足了需要

　　无状态组件函数应该提供一个参数props，返回一个React元素

　　无状态组件函数本身就是 render函数

 　　改写上面的代码：箭头函数

　　　　

 11、高阶组件

 　　

 　　如果要在上例的Root组件进行增强怎么办，例如将Root 组件的div 外部在加入其它的 div

　　

　　简化Wrapper 　　

 　　　　

import React from 'react';
import ReactDom from 'react-dom';
// let Wrapper = function (Component/*传入组件*/, props) {
//   return (
//     <div>
//       {props.schoolName}
//       <hr />
//       <Component />
//     </div>
//   )
// }
// 柯里化
let Wrapper = function (Component) {
  function _wrapper(props) {
    return (
      <div>
        {props.schoolName}
        <hr />
        <Component />
      </div>)
  }
  return _wrapper
}
// 第一次简化
let Wrapper = function(Component) {
  return function _wrapper(props){
    return (
      <div>
        {props.schoolName}
        <hr />
        <Component />
      </div>)
  }
}
//第二次简化
let Wrapper = function(Component) {
  return (props) => {
    return (
      <div>
        {props.schoolName}
        <hr />
        <Component />
      </div>)
  }
}
// 第三次简化
let Wrapper = (Component) =>(props) => 
      (
      <div>
        {props.schoolName}
        <hr />
        <Component />
      </div>
      )

//整理
let Wrapper = (Component) =>(props) => <div> {props.schoolName} <hr /> <Component /> </div>
        
let Root = (props) => <div>Root</div>

// 返回新组件
let NewComp = Wrapper(Root)
ReactDom.render(<NewComp schoolName="jerry"/>, document.getElementById('newroot'))

 　　测试：加入子组件（无状态组件）

　　

 12、装饰器　　

 　　新版的ES2016中增加了装饰器的支持，因此可以使用装饰器来改造上面的代码。

　　装饰器是装饰函数，类，不能对一个变量装饰（这样是不对的）

 　　

 　　ES 2016 的装饰器只能装饰类，所以，将Root改写成类

 　　　　

 　　让Root 也显示schoolName

　　　　

13、带参装饰器

 　　想给装饰器函数增加一个id 参数

import React from 'react';
import ReactDom from 'react-dom';

let Wrapper = (id, Component) =>(props) => 
      (
      <div id={id}>
        {props.schoolName}
        <hr />
        <Component />
      </div>
      )

// 柯里化
let Wrapper = id =>  Component => (props) => 
      (
      <div id={id}>
        {props.schoolName}
        <hr />
        <Component {...props}/>
      </div>
      )


@Wrapper('123') // Root = wrapper("123")(Root) = (props) => .....

class Root extends React.Component {
  render(){
    return <div>Root ----  {this.props.address}</div>
  }
}

ReactDom.render(<Root schoolName="jerry" address="somewhere"/>, document.getElementById('newroot'))