Menu
Woocommerce Menu

WebGL技艺储备指南,创建新视窗

0 Comment


WebGL技术储备指南

2015/12/22 · HTML5 · 1
评论 ·
WebGL

原文出处: 淘宝前端团队(FED)-
叶斋   

图片 1

WebGL 是 HTML 5 草案的一部分,可以驱动 Canvas 渲染三维场景。WebGL
虽然还未有广泛应用,但极具潜力和想象空间。本文是我学习 WebGL
时梳理知识脉络的产物,花点时间整理出来与大家分享。

理解SVG坐标系统和变换: 建立新视窗

2015/09/23 · HTML5 ·
SVG

原文出处:
SaraSoueidan   译文出处:Blueed@Ivan_z3   

在SVG绘制的任何一个时刻,你可以通过嵌套<svg>或者使用例如<symbol>的元素来建立新的viewport和用户坐标系。在这篇文章中,我们将看一下我们如何这样做,以及这样做如何帮助我们控制SVG元素并让它们变得更加灵活(或流动)。

这是SVG坐标系和变换系列的第三篇也是最后一篇文章。在第一篇中,包括了任何要理解SVG坐标系统基础的需要知道的内容;更具体的是,
SVG
viewport, viewBox和 preserveAspectRatio属性。在第二篇文章里,你可以了解到任何你需要了解的关于SVG系统变换的内容。

  • 理解SVG坐标系和变换(第一部分)-viewport,viewBox,和preserveAspectRatio
  • 理解SVG坐标系和变换(第二部分)-transform属性
  • 理解SVG坐标系和变换(第三部分)-建立新视窗

通过这篇文章,我假定你已经读了这个系列的第一部分关于SVG
viewport, viewBox 和 preserveAspectRatio 属性的内容
。在阅读这篇文章之前你不需要读第二篇关于坐标系变换的内容。

学习React之前你需要知道的的JavaScript基础知识

2018/07/25 · JavaScript
· React

原文出处:

示例

WebGL 很酷,有以下 demos 为证:

寻找奥兹国
赛车游戏
划船的男孩(Goo
Engine Demo)

嵌套<svg>元素

在第一部分我们讨论了<svg>元素如何为SVG画布内容建立一个视窗。在SVG绘制过程中的任何一个时刻,你可以创建一个新的视窗其中包含的图形是通过把一个<svg>元素包含在另一个中绘制的。通过建立新视窗,你隐性得建立了一个新视窗坐标系和新用户坐标系。

例如,试想有一个<svg>以及里面的内容:

XHTML

<svg xmlns=””
xmlns:xlink=”; <!– some SVG content
–> <svg> <!– some inner SVG content –> </svg>
<svg>

1
2
3
4
5
6
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!– some SVG content –>
    <svg>
        <!– some inner SVG content –>
    </svg>
<svg>

 

第一件需要注意的是内容<svg>元素不需要声明一个命名空间xmlns因为默认和外层<svg>的命名空间相同。当然,如果在HTML5文档中外层<svg>也不需要命名空间。

你可以使用一个嵌套的SVG来把元素组合在一起然后在父SVG中定位它们。现在,你也可以把元素组合在一起并且使用组<g>来定位-通过把元素包括在一组<g>元素中。你可以使用transform属性在画布中定位它们。然而,使用<svg>肯定好过使用<g>。使用x和y坐标来定位,在许多情况下,比使用变换更加方便。另外,<svg>元素接受宽高值,<g>不行。这意味着,<svg>也许并必要的,因为它可以创建一个新的viewport和坐标系,你可以不需要也不想要。

通过给<svg>声明宽高值,你把内容限制在通过x,y,widthheight属性定义的viewport的边界。任何超过边界的内容会被裁切。

如果你不声明xy属性,它们默认是0。如果你不声明heightwidth属性,<svg>会是父SVG宽度和高度的100%。

另外,声明用户坐标系而不是默认的也会影响内部<svg>的内容。

<svg>内的元素百分比值的声明会根据<svg>计算,而不是外层<svg>。例如,下面的代码会导致内层SVG等于400单位,里面的长方形是200个单位:

XHTML

<svg width=”800″ height=”600″> <svg width=”50%” ..> <rect
width=”50%” … /> </svg> </svg>

1
2
3
4
5
<svg width="800" height="600">
    <svg width="50%" ..>
        <rect width="50%" … />
    </svg>
</svg>

 

如果最外层<svg>的宽度为100%(例如,如果它在一个文档中内联或者你想要它可以流动),内层SVG会扩展拉伸来保持宽度为外层SVG的一半-这是强制的。

嵌套SVG在给SVG画布中的元素增加灵活性和扩展性时尤其有用。我们知道,使用viewBox值和preserveAspectRatio,我们已经可以创建响应式SVG。最外层<svg>的宽度可以设置成100%来确保它扩展拉伸到它的容器(或页面)扩展或拉伸。然后通过使用viewBox值和
preserveAspectRatio,我们可以保证SVG画布可以自适应viewport中的改变(最外层svg)。我在CSSConf演讲的幻灯片中写到了关于响应式SVG的内容。你可以在这里查看这个技术。

然而,当我们像这样创建一个响应式SVG,整个画布以及所有绘制在上面的元素都会有反应并且同时改变。但有时候,你只想让图形中的一个元素变为响应式,并且保持其他东西“固定”在一个位置和/或尺寸。这时候嵌套svg就很有用。

svg元素有独立于它父元素的坐标系,它可以有独立的viewBoxpreserveAspectRatio属性,你可以任意修改里面内容的尺寸和位置。

所以,要让一个元素更加灵活,我们可以把它包裹在<svg>元素中,并且给svg一个弹性的宽度来适应最外层SVG的宽度,然后声明preserveAspectRatio="none"这样的话里面的图形会扩展和拉伸到容器的宽度。注意svg可以多层嵌套,但是为了让事情简洁,我在这篇文章里只嵌套一层深度。

为了演示嵌套svg如何发挥作用,让我们来看一些例子。

Robin   译文出处:[众成翻译

_小生_]()   

在我的研讨会期间,更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript
ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内置函数(map,reduce,filter)或更常识性的概念,如:可组合性,可重用性,不变性或高阶函数。这些是基础知识,在开始使用React之前你不需要掌握这些基础知识,但在学习或实践它时肯定会出现这些基础知识。

以下演练是我尝试为您提供一个几乎广泛但简明的列表,其中列出了所有不同的JavaScript功能,以补充您的React应用程序。如果您有任何其他不在列表中的内容,只需对本文发表评论,我会及时更新。

本文的目标

本文的预期读者是:不熟悉图形学,熟悉前端,希望了解或系统学习 WebGL
的同学。

本文不是 WebGL 的概述性文章,也不是完整详细的 WebGL
教程。本文只希望成为一篇供 WebGL 初学者使用的提纲。

例子

试想我们有如下的SVG:图片 2

上述SVG是响应式的。改变屏幕的尺寸会导致整个SVG图形根据需要做出反应。下面的截图展示了拉伸页面的结果,以及SVG如何变得更小。注意SVG的内容如何根据SVG视窗和相互之间保持它们的初始位置。图片 3

使用嵌套SVG,我们将改变这个情况。我们可以对SVG中每个独立的元素根据SVG视窗声明一个位置,所以随着SVG
视窗尺寸的改变(即最外层svg的改变),每个元素独立于其他元素发生改变。

注意,在这个时候,你需要熟悉SVG viewport, viewBox,
preserveAspectRatio是如何生效的。

我们将要创建一个效果,当屏幕尺寸变化时,蛋壳的上部分移动使得其中的可爱的小鸡显示出来,如下图所示:图片 4

为了达到这个效果,蛋的上半部分必须和其他部分分离出来单独包含一个自己的svg。这个svg包含框会有一个IDupper-shell

然后,我们保证新的svg#upper-shell和外层SVG有一样的高度和宽度。可以通过在svg上声明width="100%"``height="100%"或者不声明任何高度和宽度来实现。如果内层SVG上没有声明任何宽高,它会自动扩展为外层SVG宽高的100%

最终,为了确保上壳被“抬”起或定位在svg#upper-shell顶部的中心,我们将使用适当的preserveAspectRatio值来确保viewBox被定位在视窗的顶部中心-值是xMidYMin

SVG图形的代码如下:

XHTML

<svg version=”1.1″ xmlns=””
xmlns:xlink=”; <!– … –>
<svg viewBox=”0 0 315 385″ preserveAspectRatio=”xMidYMid meet”>
<!– the chicken illustration –> <g id=”chicken”> <!–
… –> </g> <!– path forming the lower shell –>
<path id=”lower-shell” fill=”url(#gradient)” stroke=”#000000″
stroke-width=”1.5003″ d=”…”/> </svg> <svg id=”upper-shell”
viewBox=”0 0 315 385″ preserveAspectRatio=”xMidYMin meet”> <!–
path forming the upper shell –> <path id=”the-upper-shell”
fill=”url(#gradient)” stroke=”#000000″ stroke-width=”1.5003″
d=”…”/> </svg> </svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!– … –>
    <svg viewBox="0 0 315 385" preserveAspectRatio="xMidYMid meet">
        <!– the chicken illustration –>
        <g id="chicken">
            <!– … –>
        </g>
        <!– path forming the lower shell –>
        <path id="lower-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="…"/>
    </svg>
 
    <svg id="upper-shell" viewBox="0 0 315 385" preserveAspectRatio="xMidYMin meet">
        <!– path forming the upper shell –>
        <path id="the-upper-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="…"/>
    </svg>
</svg>

这个时候,注意在嵌套svg#upper-shell上声明的viewBox和最外层svg有相同的值(在它被移除之前)。我们用相同的viewBox值我原因就是这样,SVG在大屏幕上保持最初的样子。

所以,这件事是这样的:我们开始一个SVG-在我们的例子中,这是一张里面藏着一个小鸡的带裂纹的蛋。然后,我们创建了另一“层”并把上部分的壳放在里面-这一层通过使用嵌套svg创建。嵌套svg和外层svg的尺寸和viewBox一样。最终,内层SVG的viewBox被设置成不管屏幕尺寸是多少都“固定”在viewport的顶部-这确保了当屏幕尺寸很窄时SVG被拉长,上层的壳被向上举起,因此展示出“隐藏”在里面的小鸡。图片 5

一旦屏幕尺寸拉伸,SVG被拉长,使用preserveAspectratio="xMidYMin meet"把包含上部分壳的viewBox被定位到viewport的顶部。图片 6

点击下面按钮来查看在线SVG。记住改变屏幕尺寸再看SVG变化。

在线案例

嵌套或”分层”SVG使你可以根据改变的视窗定位SVG的一部分,在保持元素宽高比的情况下。所以图片可以在不扭曲内容元素的情况下自适应。

如果我们想要整个鸡蛋剥离显示出小鸡,我们可以单独用一个svg层包含下部分壳,viewBox也相同。确保下部分壳向下移动并固定在视窗的底部中心,我们使用preserveAspectRatio="xMidYMax meet"来定位。代码如下:

XHTML

<svg version=”1.1″ xmlns=””
xmlns:xlink=”; <svg id=”chick”
viewBox=”0 0 315 385″ preserveAspectRatio=”xMidYMid meet”> <!–
the chicken illustration –> <g id=”chick”> <!– … –>
</g> </svg> <svg id=”upper-shell” viewBox=”0 0 315 385″
preserveAspectRatio=”xMidYMid meet”> <!– path forming the upper
shell –> <path id=”the-upper-shell” fill=”url(#gradient)”
stroke=”#000000″ stroke-width=”1.5003″ d=”…”/> </svg>
<svg id=”lower-shell” viewBox=”0 0 315 385″
preserveAspectRatio=”xMidYMax meet”> <!– path forming the lower
shell –> <path id=”the-lower-shell” fill=”url(#gradient)”
stroke=”#000000″ stroke-width=”1.5003″ d=”…”/> </svg>
</svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg id="chick" viewBox="0 0 315 385" preserveAspectRatio="xMidYMid meet">
        <!– the chicken illustration –>
        <g id="chick">
            <!– … –>
        </g>
    </svg>
 
    <svg id="upper-shell" viewBox="0 0 315 385" preserveAspectRatio="xMidYMid meet">
        <!– path forming the upper shell –>
        <path id="the-upper-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="…"/>
    </svg>
 
    <svg id="lower-shell" viewBox="0 0 315 385" preserveAspectRatio="xMidYMax meet">
        <!– path forming the lower shell –>
        <path id="the-lower-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="…"/>
    </svg>
</svg>

每个svg层/viewport等于最外层svg宽高的100%。所以我们基本有了三个副本。每层包含一个元素-上部分壳,下部分壳,或小鸡。三层的viewBox是相同的,只有preserveAspectRatio不同。图片 7

当然,在这个例子里,一开始的图形中小鸡隐藏在蛋里,随着屏幕变小才显示出来。然而,你可以做一些不一样的:你可以开始在小屏幕上创建一个图形,然后在大屏幕上显示一些东西;即当svg变宽时才有更多垂直空间来展示元素。

你可以更有创造性,根据不同屏幕尺寸来显示和隐藏元素-使用媒体查询-把新元素通过特定方式定位来达到特定的效果。想象力是无穷的。

同时注意嵌套svg不需要和容器svg有相同的宽高;你可以声明宽高并且限制svg内容,超出边界裁切-这都取决于你想要达到什么效果。

目录

  • 从JavaScript中学习React
  • React 和 JavaScript
    Classes
  • React中的箭头函数
  • 作为React中的组件的fuuction
  • React类组件语法
  • 在React中的Map, Reduce 和
    Filter
  • React中的var,let和const
  • React中的三元运算符
  • React中的Import 和
    Export
  • React中的库
  • React中的高阶函数
  • React中的解构和传播运算符
  • There is more JavaScript than
    React

Canvas

熟悉 Canvas 的同学都知道,Canvas 绘图先要获取绘图上下文:

JavaScript

var context = canvas.getContext(‘2d’);

1
var context = canvas.getContext(‘2d’);

context上调用各种函数绘制图形,比如:

JavaScript

// 绘制左上角为(0,0),右下角为(50, 50)的矩形 context.fillRect(0, 0, 50,
50);

1
2
// 绘制左上角为(0,0),右下角为(50, 50)的矩形
context.fillRect(0, 0, 50, 50);

WebGL 同样需要获取绘图上下文:

JavaScript

var gl = canvas.getContext(‘webgl’); // 或 experimental-webgl

1
var gl = canvas.getContext(‘webgl’); // 或 experimental-webgl

但是接下来,如果想画一个矩形的话,就没这么简单了。实际上,Canvas
是浏览器封装好的一个绘图环境,在实际进行绘图操作时,浏览器仍然需要调用
OpenGL API。而 WebGL API 几乎就是 OpenGL API 未经封装,直接套了一层壳。

Canvas 的更多知识,可以参考:

  • JS
    权威指南的
    21.4 节或 JS
    高级程序设计中的
    15 章
  • W3CSchool
  • 阮一峰的 Canvas
    教程

使用嵌套SVG使元素流动

在保持宽高比的情况下定位元素,我们可以使用嵌套svg只允许特定元素流动-可以不保持这些特定元素的宽高比。

例如,如果你只想SVG中的一个元素流动,你可以把它包含在一个svg中,并且使用preserveAspectRatio="none"来让这个元素扩展始终撑满这个视窗的宽,并且保持宽高比和像我们在之前例子中做的一样定位其他元素。

XHTML

<svg> <!– … –> <svg viewBox=”..”
preserveAspectRatio=”none”> <!– this content will be fluid –>
</svg> <svg viewBox=”..” preserveAspectRatio=”..”> <!–
content positioned somewhere in the viewport –> </svg> <!–
… –> </svg>

1
2
3
4
5
6
7
8
9
10
<svg>
    <!– … –>
    <svg viewBox=".." preserveAspectRatio="none">
        <!– this content will be fluid –>
    </svg>
    <svg viewBox=".." preserveAspectRatio="..">
        <!– content positioned somewhere in the viewport –>
    </svg>
    <!– … –>
</svg>

Jake
Archibald创建了一个简单实用的嵌套SVG使用案例:一个简单的UI可以包含定位在最外层svg角落的元素,并且保持宽高比,UI的中间部分浮动并且根据svg宽度改变进行拉伸。你可以在这里查看。确保你在开发工具里检查代码来选取和想象不同viewbox和svg使用的效果。

从JavaScript中学习React

当你进入React的世界时,通常是使用用于启动React项目的
create-react-app。设置项目后,您将遇到以下React类组件:

JavaScript

import React, { Component } from ‘react’; import logo from ‘./logo.svg’;
import ‘./App.css’; class App extends Component { render() { return (
<div> <header> <img src alt=”logo” />
<h1>Welcome to React</h1> </header> <p> To get
started, edit <code>src/App.js</code> and save to reload.
</p> </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
 
class App extends Component {
  render() {
    return (
      <div>
        <header>
          <img src alt="logo" />
          <h1>Welcome to React</h1>
        </header>
        <p>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
 
export default App;

可以说,React类组件可能不是最好的起点。新手有许多东西需要消化,不一定是React:类语句,类方法和继承。导入语句也只是在学习React时增加了复杂性。尽管主要焦点应该是JSX(React的语法),但通常所有的事情都需要解释。这篇文章应该揭示所有的东西,大部分是JavaScript,而不用担心React。

矩阵变换

三维模型,从文件中读出来,到绘制在 Canvas 中,经历了多次坐标变换。

假设有一个最简单的模型:三角形,三个顶点分别为(-1,-1,0),(1,-1,0),(0,1,0)。这三个数据是从文件中读出来的,是三角形最初始的坐标(局部坐标)。如下图所示,右手坐标系。

图片 8

模型通常不会位于场景的原点,假设三角形的原点位于(0,0,-1)处,没有旋转或缩放,三个顶点分别为(-1,-1,-1),(1,-1,-1),(0,1,-1),即世界坐标。

图片 9

绘制三维场景必须指定一个观察者,假设观察者位于(0,0,1)处而且看向三角形,那么三个顶点相对于观察者的坐标为(-1,-1,-2),(1,-1,-2),(0,1,-2),即视图坐标。

图片 10

观察者的眼睛是一个点(这是透视投影的前提),水平视角和垂直视角都是90度,视野范围(目力所及)为[0,2]在Z轴上,观察者能够看到的区域是一个四棱台体。

图片 11

将四棱台体映射为标准立方体(CCV,中心为原点,边长为2,边与坐标轴平行)。顶点在
CCV 中的坐标,离它最终在 Canvas 中的坐标已经很接近了,如果把 CCV
的前表面看成 Canvas,那么最终三角形就画在图中橙色三角形的位置。

图片 12

上述变换是用矩阵来进行的。

局部坐标 –(模型变换)-> 世界坐标 –(视图变换)-> 视图坐标
–(投影变换)–> CCV 坐标。

以(0,1,0)为例,它的齐次向量为(0,0,1,1),上述变换的表示过程可以是:

图片 13

上面三个矩阵依次是透视投影矩阵,视图矩阵,模型矩阵。三个矩阵的值分别取决于:观察者的视角和视野距离,观察者在世界中的状态(位置和方向),模型在世界中的状态(位置和方向)。计算的结果是(0,1,1,2),化成齐次坐标是(0,0.5,0.5,1),就是这个点在CCV中的坐标,那么(0,0.5)就是在Canvas中的坐标(认为
Canvas 中心为原点,长宽都为2)。

上面出现的(0,0,1,1)是(0,0,1)的齐次向量。齐次向量(x,y,z,w)可以代表三维向量(x,y,z)参与矩阵运算,通俗地说,w
分量为 1 时表示位置,w 分量为 0 时表示位移。

WebGL 没有提供任何有关上述变换的机制,开发者需要亲自计算顶点的 CCV
坐标。

关于坐标变换的更多内容,可以参考:

  • 计算机图形学中的5-7章
  • 变换矩阵@维基百科
  • 透视投影详解

比较复杂的是模型变换中的绕任意轴旋转(通常用四元数生成矩阵)和投影变换(上面的例子都没收涉及到)。

关于绕任意轴旋转和四元数,可以参考:

  • 四元数@维基百科
  • 一个老外对四元数公式的证明

关于齐次向量的更多内容,可以参考。

  • 计算机图形学的5.2节
  • 齐次坐标@维基百科

其他建立新视窗的方法

svg不是唯一能在SVG中创建新视窗的元素。在下面部分,我们会讨论使用其他SVG元素创建新视窗的方法。

React和JavaScript类

在开始时遇到React类组件,需要有关JavaScript类的基础只是。JavaScript类在语言中是相当新的。以前,只有JavaScript的原型链也可以用于继承。JavaScript类在原型继承之上构建,使整个事物更简单。

定义React组件的一种方法是使用JavaScript类。为了理解JavaScript类,您可以花一些时间在没有React的情况下学习它们。

JavaScript

class Developer { constructor(firstname, lastname) { this.firstname =
firstname; this.lastname = lastname; } getName() { return this.firstname

  • ‘ ‘ + this.lastname; } } var me = new Developer(‘Robin’, ‘Wieruch’);
    console.log(me.getName());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }
 
  getName() {
    return this.firstname + ‘ ‘ + this.lastname;
  }
}
 
var me = new Developer(‘Robin’, ‘Wieruch’);
 
console.log(me.getName());

类描述了一个实体,该实体用作创建该实体实例的蓝图。一旦使用new语句创建了类的实例,就会调用该类的构造函数,该实例化该类的实例。因此,类可以具有通常位于其构造函数中的属性。此外,类方法(例如getName())用于读取(或写入)实例的数据。类的实例在类中表示为此对象,但实例外部仅指定给JavaScript变量。

通常,类用于面向对象编程中的继承。它们在JavaScript中用于相同的,而extends语句可用于从另一个类继承一个类。具有extends语句的更专业的类继承了更通用类的所有功能,但可以向其添加其专用功能。

JavaScript

class Developer { constructor(firstname, lastname) { this.firstname =
firstname; this.lastname = lastname; } getName() { return this.firstname

  • ‘ ‘ + this.lastname; } } class ReactDeveloper extends Developer {
    getJob() { return ‘React Developer’; } } var me = new
    ReactDeveloper(‘Robin’, ‘Wieruch’); console.log(me.getName());
    console.log(me.getJob());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }
 
  getName() {
    return this.firstname + ‘ ‘ + this.lastname;
  }
}
 
class ReactDeveloper extends Developer {
  getJob() {
    return ‘React Developer’;
  }
}
 
var me = new ReactDeveloper(‘Robin’, ‘Wieruch’);
 
console.log(me.getName());
console.log(me.getJob());

基本上,它只需要完全理解React类组件。
JavaScript类用于定义React组件,但正如您所看到的,React组件只是一个React组件,因为它继承了从React包导入的React
Component类的所有功能。

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { return ( <div> <h1>Welcome to React</h1>
</div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}
 
export default App;

这就是为什么render()方法在React类组件中是必需的:来自导入的React包的React组件指示您使用它在浏览器中显示某些内容。此外,如果不从React组件扩展,您将无法使用其他生命周期方法
(包括render()方法)。例如,不存在componentDidMount()生命周期方法,因为该组件将是vanilla
JavaScript类的实例。并且不仅生命周期方法会消失,React的API方法(例如用于本地状态管理的this.setState())也不可用。

但是,正如您所看到的,使用JavaScript类有利于使用您的专业行为扩展通用类。因此,您可以引入自己的类方法或属性。

JavaScript

import React, { Component } from ‘react’; class App extends Component {
getGreeting() { return ‘Welcome to React’; } render() { return (
<div> <h1>{this.getGreeting()}</h1> </div> ); }
} export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from ‘react’;
 
class App extends Component {
  getGreeting() {
    return ‘Welcome to React’;
  }
 
  render() {
    return (
      <div>
        <h1>{this.getGreeting()}</h1>
      </div>
    );
  }
}
 
export default App;

现在您知道为什么React使用JavaScript类来定义React类组件。当您需要访问React的API(生命周期方法,this.state和this.setState())时,可以使用它们。在下文中,您将看到如何以不同的方式定义React组件,而不使用JavaScript类,因为您可能不需要始终使用类方法,生命周期方法和状态。

毕竟,JavaScript类欢迎使用React中的继承,这对于React来说不是一个理想的结果,因为React更喜欢组合而不是继承。因此,您应该为您的React组件扩展的唯一类应该是官方的React组件。

着色器和光栅化

在 WebGL
中,开发者是通过着色器来完成上述变换的。着色器是运行在显卡中的程序,以
GLSL 语言编写,开发者需要将着色器的源码以字符串的形式传给 WebGL
上下文的相关函数。

着色器有两种,顶点着色器和片元(像素)着色器,它们成对出现。顶点着色器任务是接收顶点的局部坐标,输出
CCV 坐标。CCV
坐标经过光栅化,转化为逐像素的数据,传给片元着色器。片元着色器的任务是确定每个片元的颜色。

顶点着色器接收的是 attribute 变量,是逐顶点的数据。顶点着色器输出
varying 变量,也是逐顶点的。逐顶点的 varying
变量数据经过光栅化,成为逐片元的 varying
变量数据,输入片元着色器,片元着色器输出的结果就会显示在 Canvas 上。

图片 14

着色器功能很多,上述只是基本功能。大部分炫酷的效果都是依赖着色器的。如果你对着色器完全没有概念,可以试着理解下一节
hello world 程序中的着色器再回顾一下本节。

关于更多着色器的知识,可以参考:

  • GLSL@维基百科
  • WebGL@MSDN

使用<use>ing <symbol>建立一个新的视窗

symbol元素会定义新视窗,无论它什么时候被use元素实例化。

symbol元素的使用可以参考use元素中的xlink:href属性:

XHTML

<svg> <symbol id=”my-symbol” viewBox=”0 0 300 200″> <!–
contents of the symbol –> <!– this content is only rendered when
`use`d –> </symbol> <use xlink:href=”#my-symbol” x=”?”
y=”?” width=”?” height=”?”> </svg>

1
2
3
4
5
6
7
<svg>
    <symbol id="my-symbol" viewBox="0 0 300 200">
        <!– contents of the symbol –>
        <!– this content is only rendered when `use`d –>
    </symbol>
    <use xlink:href="#my-symbol" x="?" y="?" width="?" height="?">
</svg>

上面值中的问号表示这些值也许没有声明-如果xy没有声明,默认值为0,也不需要声明宽高。

看到了吧,当你use一个symbol元素,然后使用开发工具检查DOM,你不会看到use标签中symbol的内容。因为use的内容在shadow
tree里被渲染,如果你在开发工具中允许shadow DOM显示你就能看到。

symbol被使用时,它被深度克隆到生成的shadow
tree中,例外是symbolsvg替换。这个生成的svg总是有明确的宽高。如果宽高的值在use元素上,这些值会被转换生成svg。如果属性宽和/或高没有声明,生成的svg元素会使用这些值的100%。

因为我们在DOM中使用了svg,并且因为这个svg实际上包含在外层svg中,我们遇到的嵌套svg的状况和我们在之前一章讨论到的并没有多少不一样-嵌套的svg形成了一个新的viewport。嵌套svgviewBox是在symbol元素上声明的viewBox。(symbol元素接受viewBox元素值。更多信息,阅读这篇文章:Structuring,
Grouping, and Referencing in SVG –
The , , and Elements)

所以我们现在有了一个新的viewport,尺寸和位置可以使用元素(x,ywidthheight)声明,viewBox值可以在symbol元素上声明。symbol的内容随后再这个视窗和viewBox中被渲染和定位。

最后,symbol元素也接收preserveAspectratio属性值,你可以在由use建立的新视窗中定位viewBox。这很清楚,不是吗?你可以像我们在之前的部分里一样控制新创建的嵌套svg

Dirk
Weber 也创建了一个使用嵌套SVG和symbol元素来模仿CSS
border
images的表现。你可以在这里查看文章。

React中的箭头函数

When teaching someone about React, I explain JavaScript arrow
functions
pretty early. They are one of JavaScript’s language additions in ES6
which pushed JavaScript forward in functional programming.

在教关于React时,我很早就解释了JavaScript arrow
functions。它们是ES6中JavaScript的语言添加之一,它推动了JavaScript在函数式编程中的发展。

JavaScript

// JavaScript ES5 function function getGreeting() { return ‘Welcome to
JavaScript’; } // JavaScript ES6 arrow function with body const
getGreeting = () => { return ‘Welcome to JavaScript’; } // JavaScript
ES6 arrow function without body and implicit return const getGreeting =
() => ‘Welcome to JavaScript’;

1
2
3
4
5
6
7
8
9
10
11
12
13
// JavaScript ES5 function
function getGreeting() {
  return ‘Welcome to JavaScript’;
}
 
// JavaScript ES6 arrow function with body
const getGreeting = () => {
  return ‘Welcome to JavaScript’;
}
 
// JavaScript ES6 arrow function without body and implicit return
const getGreeting = () =>
  ‘Welcome to JavaScript’;

JavaScript箭头函数通常用在React应用程序中,以保持代码简洁和可读。尝试从JavaScript
ES5到ES6功能重构我的功能。在某些时候,当JavaScript ES5函数和JavaScript
ES6函数之间的差异很明显时,我坚持使用JavaScript
ES6的方式来实现箭头函数。但是,我总是看到React新手的太多不同的语法可能会让人不知所措。因此,我尝试在使用它们在React中全部使用之前,使JavaScript函数的不同特性变得清晰。在以下部分中,您将了解如何在React中常用JavaScript箭头函数。

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图