一篇包含了React所有基本点的文章

去年，我写了一本关于学习React.js的小书，原来是大约100页。今年我要挑战自己，把它归纳为一篇文章。

10年的阳新网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整阳新建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“阳新网站设计”,“阳新网站推广”以来，每个客户项目都认真落实执行。

本文不会涵盖什么是React，或者为什么要学习它。相反，这是面向已经熟悉JavaScript并熟悉DOM API基础知识的人，对React.js的基础知识的介绍。

以下所有代码示例均标示为参考。它们纯粹是为了提供概念而写的例子。他们大多数可以写得更好一些。

1：组件是React的一切

React是围绕可重用组件的概念设计的。您定义小组件，并将它们放在一起形成更大的组件。

所有小或小的组件都可重复使用，甚至跨不同的项目。

一个React组件(以其最简单的形式)是一个简单的JavaScript函数：

 
 
 
  
  
  // Example 1
  
  
  // https://jscomplete.com/repl?j=Sy3QAdKHW
  
  
  function Button (props) {
  
  
    // Returns a DOM element here. For example:
  
  
    return {props.label};
  
  
  }
  
  
  // To render the Button component to the browser
  
  
  ReactDOM.render(, mountNode)

用于按钮标签的花括号将在下面介绍。现在不必要担心他们。 ReactDOM也将在后面解释，但是如果要测试这个例子和接下来的代码示例，render函数就是你需要的。

ReactDOM.render的第二个参数是React将要接管和控制的目标DOM元素。在jsComplete REPL中，您就可以使用mountNode变量。

关于示例1的注意事项有以下几点：

组件名称以大写字母开头。这是必需的，因为我们将处理HTML元素和React元素的混合。小写名称保留给HTML元素。事实上，请继续尝试将React组件命名为“button”。 ReactDOM将忽略该函数并呈现常规的空HTML按钮。
每个组件都接收一个属性列表，就像HTML元素一样。在React中，这个列表叫做props。创建功能组件，你可以通过使用任意名称命名props。
在上面的Button组件的返回中，我们写出了奇怪的HTML。这既不是JavaScript也不是HTML，甚至不是React.js。但是，它非常受欢迎，成为React应用程序中的默认设置。它被称为JSX，它是一个JavaScript扩展。 JSX也是妥协! 继续尝试在上面的函数中的任何其他HTML元素，并查看它们是如何支持的(例如，返回一个文本输入元素)。

2: What the flux is JSX?

上面的示例1可以用纯粹的React.js来编写，而不需要JSX，如下所示：

 
 
 
  
  
  // Example 2 -  React component without JSX
  
  
  // https://jscomplete.com/repl?j=HyiEwoYB-
  
  
  function Button (props) {
  
  
    return React.createElement(
  
  
      "button",
  
  
      { type: "submit" },
  
  
      props.label
  
  
    );
  
  
  }
  
  
  // To use Button, you would do something like
  
  
  ReactDOM.render(
  
  
    React.createElement(Button, { label: "Save" }),
  
  
    mountNode
  
  
  );

上面的示例1可以用纯粹的React.js来编写，而不需要JSX，如下所示：

createElement函数是React***API中函数。您需要学习的这个级别中共有7件事情中的1项。可见ReactApi多么简短。

很像DOM本身有一个document.createElement函数来创建一个由标签名称指定的元素，React的createElement函数是一个更高级别的函数，可以做类似于document.createElement的功能。但它也可以用于创建一个表示React组件的元素。当我们使用上面的例2中的Button组件时，我们这里就是创建了一个React组件。

与document.createElement不同，React的createElement可以接受第二个参数之后的动态参数，以表示创建的元素的后代。所以createElement实际上创建一个树。

这是一个例子：

 
 
 
  
  
  / Example 3 -  React’s createElement API
  
  
  // https://jscomplete.com/repl?j=r1GNoiFBb
  
  
  const InputForm = React.createElement(
  
  
    "form",
  
  
    { target: "_blank", action: "https://google.com/search" },
  
  
    React.createElement("div", null, "Enter input and click Search"),
  
  
    React.createElement("input", { name: "q", className: "input" }),
  
  
    React.createElement(Button, { label: "Search" })
  
  
  );
  
  
  // InputForm uses the Button component, so we need that too:
  
  
  function Button (props) {
  
  
    return React.createElement(
  
  
      "button",
  
  
      { type: "submit" },
  
  
      props.label
  
  
    );
  
  
  }
  
  
  // Then we can use InputForm directly with .render
  
  
  ReactDOM.render(InputForm, mountNode);

关于以上例子要注意的几点：

InputForm不是React组件; 它只是一个React元素。这就是为什么我们直接在ReactDOM.render调用中使用它，而不是使用。
我们可以嵌套React.createElement调用，因为它都是JavaScript。
React.createElement的第二个参数可以是null，也可以是一个空对象，当元素不需要attributes和props时。
我们可以将HTML元素与React组件混合使用。您可以将HTML元素视为内置的React组件。
React的API尝试尽可能接近DOM API，因此我们为输入元素使用className而不是类。私以为，我们都希望React的API将成为DOM API本身的一部分。因为，你知道的，这有太多的好处了。

上面的代码是您在引入React库时了解的内容。浏览器不处理任何JSX业务。然而，我们人类喜欢看HTML并且使用HTML而不是这些createElement调用(想象一下使用document.createElement构建一个网站，我相信你可以的!)。这就是为什么存在JSX的原因。我们可以用非常类似于HTML的语法编写它，而不是用React.createElement调用上面的表单：

 
 
 
  
  
  // Example 4 - JSX (compare with Example 3)
  
  
  // https://jscomplete.com/repl?j=SJWy3otHW
  
  
  const InputForm =
  
  
    
  
  
      Enter input and click Search
  
  
      
  
  
      
  
  
    ;
  
  
  // InputForm "still" uses the Button component, so we need that too.
  
  
  // Either JSX or normal form would do
  
  
  function Button (props) {
  
  
    // Returns a DOM element here. For example:
  
  
    return {props.label};
  
  
  }
  
  
  // Then we can use InputForm directly with .render
  
  
  ReactDOM.render(InputForm, mountNode);

关于上面的例子注意以下几点

它不是HTML。例如，我们仍然在使用className而不是类。
我们仍然在考虑将以上HTML作为JavaScript。看看我在末尾添加了分号。

我们上面写的(例4)是JSX。然而，我们在浏览器的执行版本是它的编译版本(示例3)。为了实现这一点，我们需要使用预处理器将JSX版本转换为React.createElement版本。

那就是JSX。这是一个折中，允许我们以类似于HTML的语法编写我们的React组件，这是一个很好的共识。

上面标题中的“Flux”一词被选为韵脚(...)，但它也是Facebook流行的非常受欢迎的应用程序架构的名称。最着名的实现是Redux。

JSX，顺便说一下，可以自己在其他地方使用。这不是只有在React中才可以使用的。

3: 您可以在JSX中的任何位置使用JavaScript表达式

在JSX部分中，您可以在一对花括号内使用任何JavaScript表达式。

 
 
 
  
  
  // Example 5 -  Using JavaScript expressions in JSX
  
  
  // https://jscomplete.com/repl?j=SkNN3oYSW
  
  
  const RandomValue = () => 
  
  
    
  
  
      { Math.floor(Math.random() * 100) }

;

// To use it:

ReactDOM.render(, mountNode);

任何JavaScript表达式都可以放在那些花括号内。这相当于JavaScript模板文字中的$ {}插值语法。

这是JSX中唯一的约束：只有表达式。所以，你不能使用常规的if语句，但是三元表达式是可以的。

JavaScript变量也是表达式，所以当组件接收到props列表(RandomValue组件没有，props是可选的)时，可以在花括号内使用这些props。我们在上面的Button组件中这样做了(示例1)。

JavaScript对象也是表达式。有时候，我们在一个花括号里面使用一个JavaScript对象，这使得它看起来像双花括号，但它实际上只是一个大括号内的一个对象。一个用例是将CSS样式对象传递给React中的style属性：

 
 
 
  
  
  // Example 6 - An object passed to the special React style prop
  
  
  // https://jscomplete.com/repl?j=S1Kw2sFHb
  
  
  const ErrorDisplay = ({message}) =>
  
  
    
  
  
      {message}

请注意，我如何仅解析props参数中的message的。这是JavaScript。还要注意上面的style属性是一个特殊的属性(再次，它不是HTML，它更接近于DOM API)。我们使用一个对象作为style属性的值。该对象定义了样式，就像我们使用JavaScript一样(因为确实就是)。

甚至可以在JSX中使用React元素，因为这也是一个表达式。记住，一个React元素就是一个函数调用：

// Example 8 - Using an array map inside {}
// https://jscomplete.com/repl?j=SJ29aiYH-
const Doubler = ({value=[1, 2, 3]}) =>
{value.map(e => e * 2)}
;
// Use it
ReactDOM.render(, mountNode);

// Example 9 - Creating components using JavaScript classes
// https://jscomplete.com/repl?j=ryjk0iKHb
class Button extends React.Component {
render() {
return ;
}
}
// Use it (same syntax)
ReactDOM.render(, mountNode);

// Example 10 - Customizing a component instance
// https://jscomplete.com/repl?j=rko7RsKS-
class Button extends React.Component {
constructor(props) {
super(props);
this.id = Date.now();
}
render() {
return {this.props.label}

// Example 11 — Using class properties
// https://jscomplete.com/repl?j=H1YDCoFSb
class Button extends React.Component {
clickCounter = 0;
handleClick = () => {
console.log(`Clicked: ${++this.clickCounter}`);
};
render() {
return (
{this.props.label}
);
}
}
// Use it
ReactDOM.render(, mountNode);

// Example 12 - Working with wrapped events
// https://jscomplete.com/repl?j=HkIhRoKBb
class Form extends React.Component {
handleSubmit = (event) => {
event.preventDefault();
console.log('Form submitted');
};
render() {
return (
Submit
);
}
}
// Use it
ReactDOM.render(, mountNode);

// Example 13 - the setState API
// https://jscomplete.com/repl?j=H1fek2KH-
class CounterButton extends React.Component {
state = {
clickCounter: 0,
currentTimestamp: new Date(),
};
handleClick = () => {
this.setState((prevState) => {
return { clickCounter: prevState.clickCounter + 1 };
});
};
componentDidMount() {
setInterval(() => {
this.setState({ currentTimestamp: new Date() })
}, 1000);
}
render() {
return (
Click
Clicked: {this.state.clickCounter}
Time: {this.state.currentTimestamp.toLocaleString()}
);
}
}
// Use it
ReactDOM.render(, mountNode);