前端开发之React开发框架的介绍与使用

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)
? 编码:
?

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

  • {item}>

  • })
    ? 注意:
    ? 便签必须要又结束符
    ? 标签的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 自定义组件;
    }//方式二:ES6类语法(复杂组件,推荐使用)class MyComponent2 extends React.Component{
    render(){
    return 自定义组件;
    }
    }//方式三:ES5老语法(不推荐)var MyComponent3 = React.createClass({
    render(){
    return 自定义组件;
    }
    })
    ? 渲染组件标签ReactDOM.render(,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传递
    ? 组件的组合
    ? 组件标签中包含子组件标签
    ? 拆分组件:拆分界面,抽取组件
    ? 通过props传递数据
    refs
    ? 组件内包含ref属性的标签元素的集合对象
    ? 给操作目标标签指定ref属性,打一个标识
    ? 在组件内部获得标签对象:this.refs.refName(只是得到了标签元素对象)

    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 (

    );
    }
    handleClick() {
    this.setState({ backgroundColor: "red" });
    }
    }
    render(, document.getElementById("root"));
    实现一个双向绑定的组件
    ? React是当想数据流
    ? 需要通过onChange监听手段实现,或使用订阅方式PusSubJS https://github.com/mroderick/...(类似与Android的EventBus)
    组件生命周期
    前端开发之React开发框架的介绍与使用
    文章图片

    ---初始化阶段---
    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来控制组件是否需要更新。
    1. 一般我们通过该函数来优化性能:
    一个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()
    【前端开发之React开发框架的介绍与使用】作者:zEcong

      推荐阅读