React.js的基础知识

今天你吸猫了么
129 阅读9分钟

从本教程开始，我们将开始研究React.js--一个受欢迎得不得了的开源JavaScript库。在开始我们的React.js之旅之前，学习一下ES6和各种JavaScript概念，如变量、对象和数组，会有所帮助。React.js当然会使用JavaScript中的函数和类。此外，我们还将学习使用React的声明性。声明性的意思是，你描述你想要发生的事情，而工具为你做工作。SQL语言是声明式的最流行的例子。让我们现在就开始使用React.js!

为什么React.js如此受欢迎？

当然，在查看本教程之前，你肯定听说过React.js。事实上，WordPress现在在它自己的Gutenberg编辑器中利用了React.js库。React专注于构建用户界面。当然，用户界面是终端用户与一个应用程序进行交互的方式，无论是基于网络的还是基于移动的。React.js使用JavaScript，所以它对网络和移动用户界面都很完美。在React.js中，开发者描述用户界面。这是React.js的一个关键方面，使得它很受欢迎。设计师可以告诉React.js她想要什么，而React.js则为我们完成繁重的工作。React.js允许开发者建立复杂的用户界面，而无需使用JavaScript和本地API从头做起。这就是声明性的含义。换句话说，我们告诉工具我们想要什么，而不是如何去做。直接与DOM API合作是很困难的。React.js使用一个虚拟的DOM，它比真实的DOM更友好。拥有React.js技能对于iOS和Android移动应用程序以及桌面浏览器来说是非常好的。此外，React.js是相当小的，所以一旦你掌握了基本的API，你的JavaScript知识将使你能用这个库做非常有成效的事情。

3.React.js的基本概念

在React.js中，有三个基本概念需要理解。第一个是组件。

1.组件

React中的用户界面是用组件来描述的。把一个组件看成是一个简单的JavaScript函数。就像在其他编程语言中，函数被调用时有一些输入，希望我们能得到一些返回的输出。在React.js中，这种工作方式有点不同。一个React.js组件并不是真的被调用。你只是以类似于写标准html的方式来写它。
react is declarative

组件是：

  • 像函数一样
  • 输入：props, state | 输出。输出：UI
  • 可重复使用和可组合
  • <组件> />
  • 可以管理一个私有状态

2.反应式更新

React.js的第二个大概念是反应式更新。当一个React组件的状态（可以认为是该组件的输入）发生变化时，它所代表的用户界面，即输出，也会发生变化。任何时候这种变化都会发生，dom树中的html需要重新生成。当使用React.js时，它将简单地对组件的状态变化做出反应，并自动更新DOM中需要更新的部分。
react to generate html

对于反应式更新。

  • React会反应
  • 把更新带到浏览器上

3.虚拟DOM

关于React.js，我们需要注意的第三个重要概念是虚拟DOM。什么是虚拟DOM？它可以被认为是视图在内存中的一个虚拟表示。在React.js中，你使用JavaScript生成你的html标记。当一个网络应用程序通过AJAX从服务器接收数据时，你需要比HTML更多的东西来处理这些数据。这就是React.js在内存中使用HTML视图的虚拟表示，也被称为树形调和算法。React使用虚拟DOM来比较内存中的UI版本，然后再对它们采取行动。

对于虚拟DOM。

  • 使用JavaScript生成HTML
  • 没有HTML模板语言。
  • 树形调和

让我们建立一个React组件

好了，废话不多说了，让我们建立一个简单的React.js组件来看看这是如何工作的。

React.js

function Helloreact() {
	return <div>Hello React!</div>;
}

ReactDOM.render(
  <Helloreact />, 
  document.getElementById('mountIt'),
);

html

<div id="mountIt"></div>

输出

react hello world

在上面的代码中是一个简单的React函数组件，名为 Helloreact.这个组件返回一个没有输入的div。为了在浏览器中显示一个React组件，我们需要告诉ReactDOM库如何做。我们可以使用ReactDOM.render()函数，它接收两个参数。第一个参数是要渲染的组件。在这个例子中，它是Helloreact组件。ReactDOM.render()函数的第二个参数是我们希望React组件显示的浏览器中的DOM元素。这是该组件将被安装的地方。

安装创建React应用程序

在你的本地机器上使用一些React.js代码的最简单方法是使用Create React App，通过使用NPM安装它。只要你已经安装了Node，你就可以运行一些简单的命令，比如说这些。

npm i create-react-app
npx create-react-app hello-react
cd hello-react
npm start

然后访问http://localhost:3000/，见证一个新的React.js应用程序的所有荣耀！

你可以在Visual Studio Code这样的编辑器中打开你的应用程序文件夹，它将出现与此类似的内容。
create react app visual studio code

现在，为了确保我们理解这里发生的事情，我们可以去掉App.js中的所有内容，用这里的代码替换。

import ReactDOM from 'react-dom'
import React from 'react';

function Button() {
	return <button>Stateless Button!</button>;
}

ReactDOM.render(
  <Button />, 
  document.getElementById('root'),
);

export default Button;

这给了我们一个简单的按钮，当我们点击它的时候，它什么也不做!
stateless reactjs button

如何使用React Hook

现在我们要对我们的按钮进行更多的花样翻新。我们想利用某种状态。让我们更新一下这里的代码。

import ReactDOM from 'react-dom'
import React, { useState } from 'react';

function Button() {
	const [counter, setCounter] = useState(1);
	return <button onClick={() => setCounter(counter+1)}>{counter}</button>;
}

ReactDOM.render(
  <Button />, 
  document.getElementById('root'),
);

export default Button;

上面的代码使用了React.js中一个名为useState的特殊函数。如果你跟着这个链接，你会看到这个函数实际上是React.js中的一个状态钩。useState函数在被调用时返回两个项目。第一项是一个状态对象，第二项是一个改变该状态对象的函数。状态对象可以是任何类型的，比如一个字符串、一个数字、一个数组或其他东西。在这个例子中，它是一个数字。状态对象的名字是 counter而其更新函数的名称是 setCounter.在代码中，我们使用JavaScript的析构来在一行中捕获这两个变量。代码的其余部分几乎向我们展示了正在发生的事情。当按钮被点击时，计数器就会递增1。我们可以在这里看到!

React中的单向数据流

在React中，数据从一个组件移动到另一个组件。让我们看看这里的动作。

import ReactDOM from 'react-dom'
import React, { useState } from 'react';
 
function Button(props) {
	return (
  	<button onClick={props.onClickFunction}>
      "Click To Increment!"
    </button>
  );
}

function Presentation(props) {
	return (
  	<li>{props.message}</li>
  );
}

function App() {
	const [counter, setCounter] = useState(0);
  const incrementCounter = () => setCounter(counter+1);
	return (
    <div>
      <Button onClickFunction={incrementCounter} increment={1} />
      <Presentation message={counter}/>
    </div>  
  );
}

ReactDOM.render(
  <App />, 
  document.getElementById('root'),
);

export default App;

在上面的代码中，我们现在正在使用组件之间的单向数据流。一个React组件中的状态只能由该组件本身访问。为了让两个组件都能访问计数器的状态，我们需要创建一个父组件。这就是新的 App组件的作用。因此，useState现在是App组件的一部分。现在计数器的状态在App组件中，而App组件是该组件的父组件。 Presentation组件，数据现在可以从父组件流向子组件。我们的目标是使计数器的值 counter的值流向 **Presentation**组件。这是用props对象完成的。要把一个道具传递给一个组件，你要指定一个属性，类似于你在HTML中的做法。该 Presentation组件收到一个名为 message的消息，而该消息的值就是来自useStateHook的计数器变量。Presentation组件现在可以使用它的props对象。所有功能组件都会收到这个对象，即使它们没有属性。这意味着 Button组件目前正在接收它的props对象，而这个对象到目前为止都是空的。由于一个组件可以接收多个属性，所以props对象将为每个属性提供一个键-值对。这意味着为了访问消息道具并把它的值放在Presentation div中，我们用 {props.message}.

在 App组件中，有一个新的函数名为 incrementCounter.这个函数更新了 App该函数更新了组件的计数器状态，用之前的计数器值来增加计数器的值。为了使该 Button组件能够调用 incrementCounter函数。 App组件中调用该函数，我们可以将一个引用传递给 incrementCounter的引用给 Button组件的引用作为一个道具。在JavaScript中，函数只是一个对象，由于你可以把任何对象的值作为一个道具来传递，这就可以了。该 onClickFunction得到的值是incrementCounter，它是对App组件中定义的函数的引用。我们可以在onClick值中直接使用这个新传下来的行为。它将是这个组件上的一个道具，所以我们可以用以下方式访问它 props.onClickFunction.onClick函数属性允许Button调用App组件的incrementCounter函数。就好像当点击那个按钮时，Button组件向App组件伸出手说："嘿，调用那个incrementCounter函数！"因此，这给了我们一个基本的概念，即数据如何在React中使用props单向流动。

React.js简介摘要

在本教程中，我们开始学习React.js的基础知识，这是当今最流行的JavaScript库之一。一个React应用程序由可重复使用的组件组成，这些组件就像函数一样。这意味着它们接受输入，然后以React元素的形式输出一个用户界面的描述。为了在浏览器中渲染这些元素，我们使用ReactDOM。然后它将在状态发生变化时重新渲染组件。为了实现这一点，我们使用了一种特殊的React语法，称为JSX。一个组件的输入是一组属性，这些属性可以在组件内部通过名为props的第一个参数对象进行访问，还有一组状态元素，组件可以通过特殊的useState函数挂入。任何时候一个组件改变了它的状态，React都会自动重新渲染它。

avatar
文章
阅读
粉丝