坚实的React基础：初学者指南

在过去的几个月里，我一直在使用 React 和 React-Native。我已经发布了两个作为产品的应用， Kiven Aa（React）和 Pollen Chat（React Native）。当我开始学习 React 时，我找了一些不仅仅是教我如何用 React 写应用的东西（一个博客，一个视频，一个课程，等等），我也想让它帮我做好面试准备。

我发现的大部分资料都集中在某一单一方面上。所以，这篇文章针对的是那些希望理论与实践***结合的观众。我会告诉你一些理论，以便你了解幕后发生的事情，然后我会向你展示如何编写一些 React.js 代码。

如果你更喜欢视频形式，我在 [YouTube][https://youtu.be/WJ6PgzI16I4] 上传了整个课程，请去看看。

让我们开始……

React.js 是一个用于构建用户界面的 JavaScript 库

你可以构建各种单页应用程序。例如，你希望在用户界面上实时显示变化的聊天软件和电子商务门户。

一切都是组件

React 应用由组件组成，数量繁多且互相嵌套。你或许会问：”可什么是组件呢？“

组件是可重用的代码段，它定义了某些功能在 UI 上的外观和行为。比如，按钮就是一个组件。

让我们看看下面的计算器，当你尝试计算 2 + 2 = 4 -1 = 3（简单的数学题）时，你会在 Google 上看到这个计算器。

红色标记表示组件

如上图所示，这个计算器有很多区域，比如展示窗口和数字键盘。所有这些都可以是许多单独的组件或一个巨大的组件。这取决于在 React 中分解和抽象出事物的程度。你为所有这些组件分别编写代码，然后合并这些组件到一个容器中，而这个容器又是一个 React 组件。这样你就可以创建可重用的组件，最终的应用将是一组协同工作的单独组件。

以下是一个你践行了以上原则并可以用 React 编写计算器的方法。

没错！它看起来像HTML代码，然而并不是。我们将在后面的部分中详细探讨它。

设置我们的 Playground

这篇教程专注于 React 的基础部分。它没有偏向 Web 或 React Native（开发移动应用）。所以，我们会用一个在线编辑器，这样可以在学习 React 能做什么之前避免 web 或 native 的具体配置。

我已经为读者在 codepen.io 设置好了开发环境。只需点开该链接并且阅读 HTML 和 JavaScript 中的所有注释。

控制组件

我们已经了解到 React 应用是各种组件的集合，结构为嵌套树。因此，我们需要某种机制来将数据从一个组件传递到另一个组件。

进入 “props”

我们可以使用 props 对象将任意数据传递给我们的组件。 React 中的每个组件都会获取 props 对象。在学习如何使用 props 之前，让我们学习函数式组件。

a) 函数式组件

在 React 中，一个函数式组件通过 props 对象使用你传递给它的任意数据。它返回一个对象，该对象描述了 React 应渲染的 UI。函数式组件也称为无状态组件。

让我们编写***个函数式组件。

 
 
 
 
  
  
  
  function Hello(props) {
  
  
  
   return {props.name}
  
  
  
  }

就这么简单。我们只是将 props 作为参数传递给了一个普通的 JavaScript 函数并且有返回值。嗯？返回了什么？那个

{props.name}

。它是 JSX（JavaScript Extended）。我们将在后面的部分中详细了解它。

上面这个函数将在浏览器中渲染出以下 HTML。

阅读以下有关 JSX 的部分，这一部分解释了如何从我们的 JSX 代码中得到这段 HTML 。

如何在 React 应用中使用这个函数式组件？很高兴你问了！它就像下面这么简单。

属性 name 在上面的代码中变成了 Hello 组件里的 props.name ，属性 age 变成了 props.age 。

记住！你可以将一个 React 组件嵌套在其他 React 组件中。

让我们在 codepen playground 使用 Hello 组件。用我们的 Hello 组件替换 ReactDOM.render() 中的 div，并在底部窗口中查看更改。

 
 
 
 
  
  
  
  function Hello(props) {
  
  
  
   return {props.name}
  
  
  
  }
  
  
  
  
  
  
  
  ReactDOM.render(, document.getElementById('root'));

但是如果你的组件有一些内部状态怎么办？例如，像下面的计数器组件一样，它有一个内部计数变量，它在 + 和 - 键按下时发生变化。

具有内部状态的 React 组件

b) 基于类的组件

基于类的组件有一个额外属性 state ，你可以用它存放组件的私有数据。我们可以用 class 表示法重写我们的 Hello 。由于这些组件具有状态，因此这些组件也称为有状态组件。

 
 
 
 
  
  
  
  class Counter extends React.Component {
  
  
  
   // this method should be present in your component
  
  
  
   render() {
  
  
  
   return (
  
  
  
   
  
  
  
   {this.props.name}

我们继承了 React 库的 React.Component 类以在 React 中创建基于类的组件。在这里了解更多有关 JavaScript 类的东西。

render() 方法必须存在于你的类中，因为 React 会查找此方法，用以了解它应在屏幕上渲染的 UI。为了使用这种内部状态，我们首先要在组件

要使用这种内部状态，我们首先必须按以下方式初始化组件类的构造函数中的状态对象。

class Counter extends React.Component {
constructor() {
super();
// define the internal state of the component
this.state = {name: 'rajat'}
}
render() {
return (
{this.state.name}

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: this.props.start || 0}
// the following bindings are necessary to make `this` work in the callback
this.inc = this.inc.bind(this);
this.dec = this.dec.bind(this);
}
inc() {
this.setState({
count: this.state.count + 1
});
}
dec() {
this.setState({
count: this.state.count - 1
});
}
render() {
return (
{this.state.count}
);
}
}