当前位置:小鱼儿玄机二站 > 计算机网络 > 深远研讨前端框架react

深远研讨前端框架react

文章作者:计算机网络 上传时间:2019-09-03

摘要:

学习资料

react官方首页
https://facebook.github.io/react/
react中文
http://reactjs.cn/react/index.html
React Gitbook 翻译
https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
react中文导航
http://nav.react-china.org/
jsx首页
https://facebook.github.io/jsx/
react教程
http://www.runoob.com/react/react-tutorial.html
https://github.com/facebook/react/wiki/Sites-Using-React

什么是React?
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
既可以开发浏览器应用,又可以开发移动应用

React 特点
1.声明式设计 −React采用声明范式,可以轻松描述应用。
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

什么是JSX?
React 使用 JSX(JavaScript XML) 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX,但它有以下优点:

  • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
  • 它是类型安全的,在编译过程中就能发现错误。

  • 使用 JSX 编写模板更加简单快速。

直接在javaScript里面写xml的语法,使结构更加的清晰。基于ES6的语法。

State(状态)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
不需要直接操作DOM,而是通过修改state,自动更新界面

Props(属性)
state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
可以通过 getDefaultProps() 方法为 props 设置默认值

React组件生命周期

实例化

首次实例化

  • getDefaultProps
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

实例化完成后的更新

  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

存在期
组件已存在时的状态改变

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

销毁&清理期

  • componentWillUnmount

生命周期共提供了10个不同的API。

1.getDefaultProps
作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享。

2.getInitialState
作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props。

3.componentWillMount
在完成首次渲染之前调用,此时仍可以修改组件的state。

4.render
必选的方法,创建虚拟DOM,该方法具有特殊的规则:

  • 只能通过this.props和this.state访问数据
  • 可以返回null、false或任何React组件
  • 只能出现一个顶级组件(不能返回数组)
  • 不能改变组件的状态
  • 不能修改DOM的输出

5.componentDidMount
真实的DOM被渲染出来后调用,在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
在服务端中,该方法不会被调用。

6.componentWillReceiveProps
组件接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件props及state。
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}

7.shouldComponentUpdate
组件是否应当渲染新的props或state,返回false表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。
在首次渲染期间或者调用了forceUpdate方法后,该方法不会被调用

8.componentWillUpdate
接收到新的props或者state后,进行渲染之前调用,此时不允许更新props或state。

9.componentDidUpdate
完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。

10.componentWillUnmount
组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。

      最近公司要做一个嵌套在app中的应用,考虑着用Facebook的react来开发view,所以就研究了下。下面是我在开发中遇到的坑,希望能给你帮助。

项目地址:
Issue:

欢迎star和fork!

react优势:

 •仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。

•数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的部分。

 •React 都是关于构建可复用的组件,使代码复用、测试和关注分离(separation of concerns)更加简单。

注意点:

 1.加载组件的首字母大写,比如:<HeaderComponent />
 2.每一个组件的render最外层都要有一个包裹元素

 3.this.props不能修改,this.state可以修改

 4.页面oclick事件在ios中的Safari不起效果,onClick={this.detail.bind(this, item)} 需要使用其他方式,比如jQuery的绑定事件

 5.string转换成html,dangerouslySetInnerHTML={{__html: ''}}

 6.getInitialState:在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

getDefaultProps:在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 this.props (使用 in 检测属性)。

 该方法在任何实例创建之前调用,因此不能依赖于 this.props。另外,getDefaultProps() 返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。

 组件的生命周期:

  componentWillMount:

    服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。

  componentDidMount:

    在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。

  componentWillReceiveProps:

    在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。

  shouldComponentUpdate:

    在接收到新的 props 或者 state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。

如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。

  componentWillUpdate:

    在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。

  componentDidUpdate:

    在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。

  componentWillUnmount:

    在组件从 DOM 中移除的时候立刻被调用。

小结:

  使用react开发,所有html都写在js文件里,所以开发起来不是很顺畅。推荐一个chrome插件:React Developer Tools

对于React,有一些认识误区,在此总结一下:

React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;
React的服务器端Render能力只能算是一个锦上添花的功能,并不是其核心出发点,事实上React官方站点几乎没有提及其在服务器端的应用;

有人拿React和Web Component相提并论,但两者并不是完全的竞争关系,你完全可以用React去开发一个真正的Web Component;

React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。

以上所述是关于前端框架react相关知识的全部内容,希望大家喜欢。

您可能感兴趣的文章:

  • 深入理解JavaScript的React框架的原理
  • 超级给力的JavaScript的React框架入门教程
  • React.js入门学习第一篇
  • 用ReactJS和Python的Flask框架编写留言板的代码示例
  • React.js入门实例教程之创建hello world 的5种方式
  • 基于React.js实现原生js拖拽效果引发的思考
  • 再次谈论React.js实现原生js拖拽效果引起的一系列问题
  • 在React框架中实现一些AngularJS中ng指令的例子
  • JavaScript中rem布局在react中的应用
  • React实现双向绑定示例代码

本文由小鱼儿玄机二站发布于计算机网络,转载请注明出处:深远研讨前端框架react

关键词: