前端学习入门之React

点击上方“刘望舒”，选择“星标”

 多点在看，就是真爱

本文由作者 zEcong 投稿 |  来源：公众号 开发者技术成长之路

React简介

• facebook开源的前端JS结构化框架

• 一个用于动态构建用户界面的JS框架

React特点

• 声明式编码Declarative

• 组件化编码Component_Based

• 双端（客户端、服务器）渲染 Learn Once,Write Anywhere

• 操作虚拟DOM对象

• DOM diff（difference）算法

• 单向数据流

• 高效

• 虚拟(virtual)DOM,不总是直接操作DOM(批量更新，减少更新次数)

• 高效的DOM Diff算法，最小化页面重绘（减小页面更新区域）

• 导入相关js库文件（react.js,react-dom.js,babel.min.js）

• 编码：

<div id="container"></div>
<script type="text/babel">
 var aa = 123
 ReactDOM.render(<h1>{aa}</h1>, containerDOM);
</script>

React核心内容

• 虚拟DOM对象

• jsx语法：主要用来创建虚拟DOM对象

• 组件

• 组件声明周期

• 组件实例对象的三大属性：props, refs, state

React JSX

• react定义的一种类似于XML的JS拓展语法：XML+JS

• 作用：用来创建react虚拟DOM对象

• js中直接可以套标签，但标签要套js需要放在{}中

• 在解析显示js数组时，会自动遍历显示

• 把数据的数据转换成标签数组：

var liArr = dataArr.map(function(item,index){
  return <li key={index}>{item}></li>
})

• 注意：

• 便签必须要又结束符

• 标签的class属性必须为className属性

• 便签的style属性值必须为：{{clolor:'red',width:12}}

虚拟DOM

• 虚拟DOM的定义：

• 虚拟DOM(元素)是一个一般的js对象，准确的说是一个倒立的对象树

• 虚拟DOM保存了真实DOM的层次关系和基本属性，与真实DOM一一对应

• 如果只是更新虚拟DOM,页面不会重绘，大大提高了绘制效率。

• Vitual DOM 算法的基本步骤

• 用JavaScript对象结构表示DOM树的结构，然后用这个树结构建立真正的DOM树，插到文档当中。

• 当状态变更的时候，重新构建一棵新的对象树。然后新的树和旧的树进行比较，记录差异。

• 把 步骤2 中记录的差异应用到 步骤1 所构建的真正的DOM树上，更新视图。

• 深入理解

• Virtual DOM 本质上就是在JS 和 DOM 之间做了一个缓存。与CPU与硬盘的缓存原理类似。

Component

React是组件化编码开发

Component基本理解和使用：

• 自定义标签：组件类（函数）/标签

• 创建组件类

• //方式-：无状态函数（最简洁，推荐使用）
  function MyComponent1(){
    return <h1>自定义组件</h1>；
  }
  //方式二：ES6类语法（复杂组件，推荐使用）
  class MyComponent2 extends React.Component{
    render(){
      return <h1>自定义组件</h1>；
    }
  }
  //方式三：ES5老语法（不推荐）
  var MyComponent3 = React.createClass({
    render(){
      return <h1>自定义组件</h1>；
    }
  })

• 渲染组件标签

  ReactDOM.render(<MyComponent/>,cotainerEle);

ReactDOM.render()渲染组件标签的基本流程

• React内部维护了一个组件实例对象/调用组件函数，得到虚拟DOM对象

• 将虚拟DOM解析为真实DOM

• 插入到指定的页面元素内部

props

• 所有组件标签属性的集合对象

• 给标签指定属性，保存外部数据（可能是一个function）

• 在组件内部读取属性：this.props.propertyName

• 作用：从目标组件外部向组件内部传递数据

• 对props中的属性值进行类型限制和必要性限制

Person.propTypes = {
  name : React.ProTypes.string.isRequired,
  age : React.ProTypes.number.isRequired 
}

• 拓展属性：将对象的所有属性通过props传递<Person {...person}/>

• 组件的组合

• 组件标签中包含子组件标签

• 拆分组件：拆分界面，抽取组件

• 通过props传递数据

refs

• 组件内包含ref属性的标签元素的集合对象

• 给操作目标标签指定ref属性，打一个标识

• 在组件内部获得标签对象：this.refs.refName(只是得到了标签元素对象)

<input ref = 'username'/>
this.refs.username //返回input对象

• 作用：操作组件内部的真实便签dom元素对象

state

• 组件被称为“状态机”，页面的显示是更具组件的state属性的数据来显示

• 初始化指定：

constrctor(){
  super();
  this.state = {
    stateName1 : stateValue1;
    stateName2 : stateValue2;
  };
}

• 读取显示 this.state.stateName1;

• 更新状态-->更新界面：this.setState({stateName1 : stateValue1});

事件处理

• 给便签添加属性：onXxx = {this.eventHandler}

• 在组件中添加事件处理方法

        eventHandler(event){}

• 使自定义方法中的this为组件对象

• 在constructor中bind(this)

constructor(props){
  super();
  this.state = {
    isLike : false
  };
  this.changeLink = this.changeLink.bind(this);
}

changeLink(){
  this.setState({
    isLink :!this.state.isLike;
  })
}

• 使用箭头函数定义方法（ES6模块化编码是才能使用）

class BrokenButton extends React.Component {
  render() {
    return (
      <button onClick={this.handleClick} style={this.state}>
        Set background to red
      </button>
    );
  }

  handleClick() {
    this.setState({ backgroundColor: "red" });
  }
}

render(<BrokenButton />, document.getElementById("root"));

• 使用箭头函数解读：链接

实现一个双向绑定的组件

• React是当想数据流

• 需要通过onChange监听手段实现，或使用订阅方式PusSubJS https://github.com/mroderick/PubSubJS（类似与Android的EventBus)

组件生命周期

---初始化阶段---

1.设置组件的默认属性

static defaultProps = {
    name: 'Kobe',
    age:40
};
//or
Counter.defaltProps={name:'Kobe'}

2.设置组件的初始化状态

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

3.componentWillMount():组件即将被渲染到页面之前触发，此时可以进行开启定时器、向服务器发送请求等操作

4.render()：组件渲染

5.componentDidMount():组件已经被渲染到页面中后触发：此时页面中有了真正的DOM元素，可以进行DOM相关操作。

---运行中阶段---

6.compomentWillReceiveProps()：组件接收到属性时触发。

7.shouldComponentUpdate()：当组件接收到新属性，或组件的状态发生改变时触发。组件首次渲染时并不会触发。

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false
}
//该钩子函数可以接收到两个参数，新的属性和状态，返回true/false来控制组件是否需要更新。

一般我们通过该函数来优化性能：

一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染

无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而优化性能

例如React中的就提供了一个PureComponent的类，当我们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比较，所以组件状态或属性改变时，都需要返回一个新的对象或数组

1. componentWillUpdate()：组件即将被更新时触发。

2. componentDidUpdate()：组件被更新完成后触发。页面中产生了新的DOM元素，可以进行DOM操作。

---销毁阶段---

1. componentWillUnmount()：组件被销毁时触发，这里我们可以进行一些清理资源操作，例如定时器，取消订阅事件等等。

React-router

• Router: 路由器；

• Route: 注册路由；

• hashHistory：收集、管理路由历史记录；

• IndexRoute: 默认子路由组件

• Link: 生成a标签；

• hash url:通过在url前添加 # 映射成为 hash url, # 后面的url又叫片段标识符；

• 更改hash url浏览器不会更新，但会添加一条浏览历史记录。

React ajax

React没有ajax模块，集成其它的js库(如axios/fetch/jQuery/), 发送ajax请求 

• axios 封装XmlHttpRequest对象的ajax promise 可以用在浏览器端和服务器

• fetch 不再使用XmlHttpRequest对象提交ajax请求 fetch就是用来提交ajax请求的函数, 只是新的浏览才内置了fetch 为了兼容低版本的浏览器, 可以引入fetch.js 在哪个方法去发送ajax请求只显示一次(请求一次): componentDidMount()，显示多次(请求多次): componentWillReceiveProps()

---------------------------------

参考文献：

https://zh-hans.reactjs.org/docs/react-api.html

https://juejin.im/post/5a062fb551882535cd4a4ce3

https://www.bilibili.com/video/av39694124/?p=1

分享大前端、Java、Android等技术，

关注职业发展和行业动态。