React学习笔记

最新推荐文章于 2023-02-28 11:03:08 发布

hetoby

最新推荐文章于 2023-02-28 11:03:08 发布

阅读量458

点赞数

文章标签： React 网站前台开发框架

本文链接：https://blog.csdn.net/hetoby/article/details/51202834

版权

注意React和React Native是不同的，具体参见其官网。

1.Installation

1.1.Install Node.js (will get npm)

官网：https://nodejs.org/en/
这里写图片描述
运行node –v 或者npm查看是否安装成功

1.2.Install React

这里写图片描述
npm install –save react react-dom

1.3.Install Babel (for offline Transform)

安装Babel command-line tools:

npm install --global babel-cli
npm install babel-preset-react

离线转换（参见再下面的例子）：

babel --presets react src --watch --out-dir build

2.HelloWorld example

2.1.内嵌脚本

Helloworld.html: “div example” 显示 “Hello, world!”

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

2.2.独立脚本（online transform）

Helloworld.html，Note that some browsers (Chrome, e.g.) will fail to load the file unless it’s served via HTTP.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel" src="src/helloworld.js"></script>
  </body>
</html>

src/Helloworld.js

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

2.3.独立脚本（offline transform）

需要将上面的helloworld.js转换成js代码（先进入Helloworld.html所在的目录），然后运行：

babel --presets react src --watch --out-dir build

Build/helloworld.js (babel –presets react src –watch –out-dir build，转换的结果)：

ReactDOM.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);

运行上述babel命令之后，只要不退出该命令，那么当src/helloworld.js被修改，就会自动更新build/helloworld.js

helloworld.html修改如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel" src="build/helloworld.js"></script>
  </body>
</html>

3.React语法

3.1.JSX 的基本语法规则

1) 遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
2) JSX 允许直接在模板插入 JavaScript 变量，如果这个变量是一个数组，则会展开这个数组的所有成员。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var names = ['Alice', 'Emily', 'Kate', 'array.map'];
      ReactDOM.render(
        <div>
        {
          names.map(function (name) {
            return <div>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

3)组件类的第一个字母必须大写
4)组件类只能包含一个顶层标签
5)添加组件属性时，class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字

3.2.React.Component

React component的基类。

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。

根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。

3.3.React.createClass

ReactClass createClass(object specification)

创建component class. A Component implements a render method which returns one single child.
这里写图片描述

3.4.React.Children & this.props & this.props.children

this.props对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。

this.props.children的值有三种可能：如果当前组件没有子节点，它就是 undefined；如果有一个子节点，数据类型是object；如果有多个子节点，数据类型就是array。所以，处理 this.props.children的时候要小心。

React 提供的一个工具方法，用来处理 this.props.children。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。
这里写图片描述

3.5.React.PropTypes和组件的propTypes属性getDefaultProps方法

因为组件的属性是可以接受任意值的，字符串，对象，函数等等都可以。React.PropTypes就是用来验证组件实例的属性是否符合要求。
这里写图片描述
组件的getDefaultProps方法可以用来设置组件属性的默认值:

3.6.ReactDOM.render

创建或更新element元素到container中，如果提供了可选的callback，那么will be executed after the component is rendered or updated.

render(
  ReactElement element,
  DOMElement container,
  [function callback]
)

推荐不要使用该函数的返回值。

3.7.React Event System

React event system:http://facebook.github.io/react/docs/events.html#supported-events