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

39次阅读

共计 4385 个字符,预计需要花费 11 分钟才能阅读完成。

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/…(相似与 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 来管制组件是否须要更新。

  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()

作者:zEcong

正文完
 0