不能不聊聊的react--入门篇

2024年3月2日 209次阅读 来源: Siyi厶弋

本文为进修笔记，适宜入门的童鞋，若有毛病，请多多指教。

一、react降生

Web app的机能瓶颈，主要有以下缘由。

（1）Web基于DOM，而DOM很慢。阅读器翻开网页时，须要剖析文档，在内存中天生DOM构造，假如碰到庞杂的文档，这个历程是很慢的。能够设想一下，假如网页上有上万个、以至几十万个外形（不管是图片或CSS），天生DOM须要多久？更不要提与个中某一个外形互动了。

（2）DOM拖慢JavaScript。一切的DOM操纵都是同步的，会梗塞阅读器。JavaScript操纵DOM时，必需等前一个操纵完毕，才实行后一个操纵。只需一个操纵有卡顿，全部网页就会短暂落空相应。阅读重视绘网页的频次是60FPS（即16毫秒/帧），JavaScript做不到在16毫秒内完成DOM操纵，因而发生了跳帧。用户体验上的不流通、不连贯就源于此。

（3）网页是单线程的。如今的阅读器关于每一个网页，只用一个线程处置惩罚。一切事变都在这一个线程上完成，包括规划、衬着、JavaScript实行、图象解码等等，怎么能够不慢？

（4）网页没有硬件加快。网页都是由CPU处置惩罚的，没用GPU举行图形加快。

这里我们看到了dom的题目，下面来进修下react做了哪些事变，就也许清晰为何react处理了以上题目。

上风：

  • 组件可复用性和扩大性好，开辟效力进步

  • 前后端衬着模板上的一致，客户端和服务器都可衬着

  • 引入假造DOM，每一个React组件都具有一个完全的生命周期，对DOM状况的操纵都邑批量更新，以期尽量的削减页面重绘，来寻求更好的机能

劣势：

  • 框架100k,自身较大，手机页面基本首屏WIFI/4S，3G/6S，能够斟酌客户端缓存

  • 据其他营业反应，无其他劣势，好评一片

框架发起：REACT+背景直出+前端SPA，后续斟酌Service Worker、或许上传到cdn削减后续加载

二、基本

　　React 能够在阅读器运转，也能够在服务器运转；

`react.js` 是 React 的中心库
`react-dom.js` 是供应与 DOM 相干的功用
`Browser.js` 的作用是将 JSX 语法转为 JavaScript 语法，此步骤应在服务器完成

监听jsx文件到js自动转化要领：我们都晓得react实在是以jsx的体式格局编码，这就触及由jsx到js的转化，以下为自动转化体式格局

  • npm install -g react-tools

  • jsx –watch src/ build/

[JSX] (http://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩大。React 能够用来做简朴的 JSX 句法转换。

重点一：组件

ReactDOM.render 是 React 的最基本要领

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

React 许可将代码封装成组件（component），React.createClass 要领就用于天生一个组件类 HelloMessage 。模板插进去 <HelloMessage /> 时，会自动天生 HelloMessage 的一个实例（下文的”组件”都指组件类的实例）。一切组件类都必需有本身的 render 要领，用于输出组件。

注重：
1、组件类的第一个字母必需大写，不然会报错。HelloMessage
2、组件类只能包括一个顶层标签，不然也会报错。h1

组件并非实在的 DOM 节点，而是存在于内存当中的一种数据构造，叫做假造 DOM （virtual DOM）。只有当它插进去文档今后，才会变成实在的 DOM 。依据 React 的设想，一切的 DOM 更改，都先在假造 DOM 上发作，然后再将现实发作更改的部份，反应在实在 DOM上，这类算法叫做 DOM diff ，它能够极大进步网页的机能表现。
从组件猎取实在 DOM 的节点，这时候就要用到 ref 属性

重点二：生命周期

组件的生命周期分红三个状况：

  • Mounting：已插进去实在 DOM

  • Updating：正在被从新衬着

  • Unmounting：已移出实在 DOM

React 为每一个状况都供应了两种处置惩罚函数，will 函数在进入状况之前挪用，did 函数在进入状况以后挪用，三种状况总计五种处置惩罚函数。

  • componentWillMount()

  • componentDidMount()

  • componentWillUpdate(object nextProps, object nextState)

  • componentDidUpdate(object prevProps, object prevState)

  • componentWillUnmount()

别的，React 还供应两种特别状况的处置惩罚函数。

  • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时挪用

  • shouldComponentUpdate(object nextProps, object nextState)：组件推断是不是从新衬着时挪用

<运用>
动画类：能够采纳componentDidMount，应用定时器不停变化外形或许透明度等形状
ajax:能够运用 componentDidMount 要领设置 Ajax 要求，比及要求胜利，再用 this.setState 要领从新衬着 UI

重点三：state

React 的一大立异，就是将组件看成是一个状况机，一开始有一个初始状况，然后用户互动，致使状况变化，从而触发从新衬着 UI。

getInitialState：用于定义初始状况，也就是一个对象
this.state ：属性读取
this.setState： 修正状况值，每次修正今后，自动挪用 this.render 要领，再次衬着组件

state和props差别：

this.props 示意那些一旦定义，就不再转变的特征，它们从父组件通报过来，“属于”父组件。
this.state 是会跟着用户互动而发生变化的特征。故表单类衬着也须要用state，this.state 是组件私有的，能够经由过程挪用 this.setState()来转变它。当 state 更新以后，组件就会从新衬着本身。

重点四：react编码历程：

  • 第一步：拆分用户界面为一个组件树

  • 第二步： 应用 React ，建立运用的一个静态版本

  • 第三步：识别出最小的（然则完全的）代表 UI 的 state,剖析是不是为state 。简朴地对每一项数据提出三个题目：

    1. 是从父级经由过程 props 传入的？能够不是 state 。

    2. 不会跟着时候转变？能够不是 state 。

    3. 能依据组件中别的 state 数据或许 props 计算出来？不是 state 。

  • 第四步：确认 state 的生命周期，推断哪一个组件会转变或许说具有这个 state 数据模型。

    1. 找出每一个基于谁人 state 衬着界面的组件。

    2. 找出配合的先人组件（某个单个的组件，在组件树中位于须要这个 state 的一切组件的上面）。

    3. 要么是配合的先人组件，要么是别的一个在组件树中位于更高层级的组件应当具有这个 state 。

    4. 假如找不出具有这个 state 数据模型的适宜的组件，建立一个新的组件来保护这个 state ，然后增加到组件树中，层级位于一切配合具有者组件的上面

  • 第五步：增加反向数据流，组件之间常常交互，从父级到子级比较简朴，这里说的从子级到父级

相干链接：
中文社区：http://react-china.org/
facebook react官网：http://facebook.github.io/react/

    原文作者：Siyi厶弋
    原文地址: https://segmentfault.com/a/1190000004888577
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞