一文带你玩转React

React是什么?

一个用于构建用户界面的 JavaScript 库
React中文文档

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。
以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。

如何使用 React

基于浏览器的模式

• React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
  • React.createElement(type,props,children);
• ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
  • ReactDOM.render(element, container[, callback])
    • element：要渲染的内容
    • container：要渲染的内容存放容器
    • callback：渲染后的回调函数

babel

babel-standalone.js：在浏览器中处理 JSX,主要用于将ECMAScript 2015+版本的代码转换为向后兼容的JavaScript的语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

JSX

什么是JSX?

JSX是一个基于 JavaScript + XMLt的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力。
Facebook公司给JSX的定位是JavaScript的扩展（直接决定了浏览器并不会像天然JavaScript一样地支持JSX，需要通过babel转译）。
JSX会被babel编译为：React.createElement()，React.createElement()将返回一个叫作“ReactElement”的JS对象。

• 它可以作为值使用
  • 它并不是字符串
    • 它也不是HTML
    • 它可以配合JavaScript 表达式一起使用

React为什么使用JSX?

JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本的同时，也提升了研发效率与研发体验。

基本语法

在 JXS 中可以使用 {表达式} 嵌入表达式

我们来通过代码来深入了解一下JSX

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

js代码

<div id="root"></div>
 <script type="text/babel">
    let str = '天气还不错'
    ReactDOM.render(
      <header>
        <h1>{str}</h1>
        <p>利用JSX渲染</p>
      </header>,
      document.querySelector('#root'),
      () => {
        console.log('渲染成功');
      }
    );
 </script>

注意:在script标签上面必须添加 type="text/babel"并且JSX不支持语句,比如if,for之类的

• 在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式
• 在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号
• 因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定
  • 例如：JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex
• JSX中的标签可以是单标签，也可以是双标签，但必须保证标签是闭合的

输入数据类型

字符串、数字：原样输出
布尔值、空、未定义会被忽略

XSS

为了有效的防止 XSS 注入攻击，React DOM 会在渲染的时候把内容（字符串）进行转义，所以字符串形式的标签是不会作为 HTML 标签进行处理的

为什么要使用 crossorigin 属性?

添加这个属性， 并且服务器允许跨域后，会得到精确的报错信息。

添加这个属性，但服务器不允许跨域，就会被同源策略阻止加载资源。

不添加这个属性，只能知道报错，不知道具体信息。

元素渲染

假设你的 HTML 文件某处有一个 <div>：

<div id="root"></div>

我们将其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。

仅使用 React 构建的应用通常只有单一的根 DOM 节点。如果你在将 React 集成进一个已有应用，那么你可以在应用中包含任意多的独立根 DOM 节点。

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：

const element = <h1>Hello, React</h1>;
ReactDOM.render(element, document.getElementById('root'));

页面上会展示出"Hello, React"。

基于自动化的集成环境模式 - create-react-app - 脚手架

通过前面 script 的方式虽然也能完成 React.js 的开发，但是有一个现在前端很重要的特性 - 模块化，无法使用。

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式

Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用 模块化 以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用，其实还有更多。

这些都通过 Create React App帮助我们安装并配置好了。

安装及使用

npm

npm i -g create-react-app
create-react-app <项目名称>

yarn

yarn global add create-react-app
create-react-app <项目名称>

npx

npx create-react-app <项目名称>

npx是 npm 5.2+ 附带的 package 运行工具

命令脚本

create-react-app 同时也提供了其它一些命令来帮助我们进行开发

npm start

启动一个内置的本地 WebServer，根目录映射到 ‘./public’ 目录，默认端口：3000

npm run test

运行 Jest 测试

npm run build

打包应用（准备上线）

组件(函数组件 & class 组件)

对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题

函数组件

• 函数的名称就是组件的名称
• 函数的返回值就是组件要渲染的内容

定义组件最简单的方式就是编写 JavaScript 函数：

<div id="root"></div>

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

class 组件

• 组件类必须继承 React.Component
• 组件类必须有 render 方法
• render方法的return后定义组件内容

创建一个FriendList.js组件

import React, { Component } from "react";
export default class FriendList extends Component {
  render() {
  	return (
		<div className="friend-list">
                <div className="friend-group">
                    <dt>家人</dt>
                    <dd>爸爸</dd>
                    <dd>妈妈</dd>
                </div>
                <div className="friend-group">
                    <dt>朋友</dt>
                    <dd>张三</dd>
                    <dd>李四</dd>
                    <dd>王五</dd>
                </div>
                <div className="friend-group">
                    <dt>客户</dt>
                    <dd>阿里</dd>
                    <dd>腾讯</dd>
                    <dd>头条</dd>
                </div>
            </div>
	);
  }
}

组件复用 - 数据抽取

为了提高组件的复用性，通常会把组件中的一些可变数据提取出来,将组件拆分为更小的组件
例如:有一组数据,存放到一个data.js组件当中

let datas = {
    family: {
        title: '家人',
        list: [
            {name: '爸爸'},
            {name: '妈妈'}
        ]
    },
    friend: {
        title: '朋友',
        list: [
            {name: '张三'},
            {name: '李四'},
            {name: '王五'}
        ]
    },
    customer: {
        title: '客户',
        list: [
            {name: '阿里'},
            {name: '腾讯'},
            {name: '头条'}
        ]
    }
};

总结:

create-react-app可以使我们更加快速的开发项目,管理组件,使用模块化开发