一、参考链接
https://reactjs.org/
http://react-china.org/
https://doc.react-china.org/
https://hulufei.gitbooks.io/react-tutorial/content/index.html
https://github.com/facebook/react/blob/master/CHANGELOG.md
https://github.com/facebook/react/issues
https://discuss.reactjs.org/
https://www.reactiflux.com/

二、调试工具
可以通过安装React Developer Tools for Chrome，来检查是否正确设置了构建过程。
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related

对于开发模式的react站点，chrome工具显示红色背景；对于生产模式的react站点，chrome工具显示黑色背景。

三、运行和安装
1、在线编辑
https://codepen.io/pen?&editors=0010
https://codesandbox.io/s/new

2、本地打开html
不适合在生产环境，因为很慢。demo如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

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

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
  </body>
</html>

3、cdn引入

A、开发环境

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

B、生产环境

<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>

加crossorigin，方便调试，捕获错误。

4、命令行

A、在新应用中安装react（零配置）
https://github.com/facebookincubator/create-react-app

如果安装了node6以上

sudo npm install -g create-react-app
create-react-app mywebapp

cd mywebapp
npm start

如果安装了npm5.2.0以上

npx create-react-app my-app

cd my-app
npm start

B、在老应用中安装react
虽然不用构建管道，也可以搭建react应用，但还是推荐您使用构建管道，它更有效率。
一个现代化的典型构建管道，通常包含包管理器（yarn，npm），打包器（webpack，browsify），编译器（babel）。

npm init
npm install --save react react-dom

为了阻止潜在的问题，react和react-dom版本应该保持一致。

npm install --save-dev babel-preset-react
// .babelrc文件

{
  "presets": ["react"]
}
// main.js

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

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

默认情况下，react会包含很多警告，在开发环境，很有用。但是，开发版本的react既大又慢，如果发布应用时，确保用生产版本的react。
如果你的react应用出现性能问题，确保你用了最小的生产版本构建。

四、jsx语法
在react中，不一定要用jsx，es6。react也没有要求一定要用jsx，但是很多人觉得jsx很好用，能够让开发者迅速在js中区分ui和逻辑，babel可以把jsx编译成js。
https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA

jsx不是字符串，也不是html，而是js的一种扩展，是React.createElement()的一种语法糖，用于生成react的元素，jsx允许开发者写更多的错误和警告信息。
在jsx中，可以用花括号包含js表达式。用驼峰属性名，比如className。

可以在if，for语句中用jsx，把jsx赋给变量，把jsx作为参数，在函数中返回jsx。
在jsx中嵌入用户输入，很安全。因为react dom在渲染前已经规避了任何值内嵌jsx，一切在渲染前都会被转化成字符串，这有助于阻止xss攻击。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement不仅做了检查，还创建了下面的对象。react的元素是不可变的，一旦被创建，他的子元素和属性都不会变。

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

五、状态
1、同步修改状态

this.setState({comment: 'Hello'});

2、异步修改状态

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

state是为做交互，数据随时改变而服务的。如果应用是静态的，就不用写state了。

3、setState(updater,callback)

第一个参数可以是对象，也可以是函数；第二个参数是可选的回调函数，通常在setState执行完成并且组件重新渲染后执行。

setState()不会立即更新组件，所以很可能拿不到更新后的state，这时候需要写一个回调或者componentDidUpdate。

六、组件
小项目自顶向下设计，大项目自下而上设计。
接收props，返回react元素。props只读，不能被组件内部修改。

1、纯组件（PureComponent）
一个组件只和props和state有关系，给定相同的props和state就会渲染出相同的结果。
PureReactComponent组件和ReactComponent组件的区别就是它在shouldComponentUpdate中会默认判断新旧属性(props)和状态(state)是否相等，浅比较，如果没有改变则返回false，因此它得以减少组件的重渲染，提升性能。

2、函数式组件（无状态）

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

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

3、类式组件（有状态）

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

类式组件可以给子组件加ref，可以用findDOMNode；
类式组件内可以设置状态和生命周期钩子；
类式组件可以用shouldComponentUpdate控制组件的重渲染；
react把大写开头的标签识别为组件，小写开头的标签识别为html标签。

4、组合组件

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

5、提取组件
将组件切分成更小的组件，便于全局复用。
6、受控组件
react控制的输入表单元素，比如input，textarea，select，为状态编写事件处理程序。
7、不受控组件
大多数情况下，推荐受控组件来处理表单元素，即state数据驱动视图。偶尔也可以用DOM处理表单，借助ref获取真实的DOM元素，进而获取值。
8、高阶组件（HOC）
高阶组件是一个函数，接收一个组件作为参数，并返回一个新组件。
组件复用，建议用组合而不是用继承实现。

七、生命周期
涉及挂载，更新，卸载，捕获错误等阶段，总共10个方法。

如果是ES5，可以用getDefaultProps获取默认属性，用getInitialState初始化状态，用createClass创建类。

如果是ES6，可以用MyCom.DefaultProps获取默认属性，在constructor中初始化状态，用class关键字创建类。

以下方法需要在继承React.Component的class中使用，ES6语法。
1、挂载阶段
A、constructor(props)
挂载前调用，初始化状态。

B、componentWillMount
挂载前调用，在该方法同步设置状态，不会触发重新渲染。服务端渲染会用到。

C、render
该方法是必须的，不应该改变组件的状态，不直接与浏览器交互，应该保持纯净，每次返回相同的状态。若shouldComponentUpdate()返回false，render()函数将不会被调用。

D、componentDidMount
挂载后调用，在该方法可以发送ajax请求。在该方法设置状态，会触发重新渲染。

2、更新阶段
A、componentWillReceiveProps(nextProps)
挂载阶段，不会调用带有初始属性的该方法，只会在挂载后接收新属性前调用，确保比较新旧属性后，设置状态，重新渲染。因为即便属性没变，react也可能调用该方法重新渲染，所以最好先判断属性是否改变，然后设置状态。

B、shouldComponentUpdate(nextProps, nextState)
初始化渲染时，该方法不会被调用。接收新属性或状态时，在渲染前被调用，默认返回true。如果该方法返回false，表示属性和状态没变，也就不会调用componentWillUpdate()，render()和componentDidUpdate()。
如果shouldComponentUpdate()返回true，setState()永远都会导致重渲。

C、componentWillUpdate(nextProps, nextState)
初始化渲染时，该方法不会被调用。接收新属性或状态时，该方法在渲染前被调用。

D、render
E、componentDidUpdate(prevProps, prevState)
初始化渲染时，该方法不会被调用。组件更新后，会调用该方法，在该方法可以发送ajax请求。

3、卸载阶段
componentWillUnmount
组件被卸载和销毁之前调用，在该方法可以取消定时器，网络请求，清理DOM元素。

4、捕获错误阶段
componentDidCatch(error, info)
react 16中出现错误边界的概念，由于react组件是声明式，而try语句只能用于命令式。错误边界只能捕获子组件的错误，不能捕获自身的错误。

八、优点和缺点
1、react可以不用es6
2、react可以不用jsx
3、创建响应式UI，数据变化时，有效更新和渲染组件。声明视图使代码更容易预测和调试。
4、基于组件，封装组件，管理状态，组合复杂的用户界面。都写在js里面，没有把视图和逻辑进行分离。
5、学一次，写在任何地方。不用考虑旧技术的支持，不用重写已有的代码，就可以在react中开发新特性。
6、可以用node做服务端渲染，用react native做移动端app。
7、react不能用属性选择器

九、答疑解惑
1、可以在js文件中写jsx语法吗？可以在jsx文件中写jsx语法吗？可以在js文件写js语法吗？可以在jsx文件写js语法吗？
都可以，不过，react建议在jsx文件写jsx语法，在js文件写js语法。另外，可以利用编辑器的语法高亮。
2、列表循环
列表循环生成的react的节点，key如果采用索引值，一旦列表新增或删除1条数据，所有节点都会更新，页面性能也会降低。
如果列表有唯一标识，比如id属性，可采用id作为key。
key值建议用唯一的字符串，不要用索引值。

3、判断是否挂载

利用组件的不同生命周期，设置state的值，判断该值即可。

componentDidMount() {
    this.mounted = true;
}

componentWillUnmount() {
    this.mounted = false;
}

4、操作DOM

react提供了refs和findDOMNode。

5、高级组件

谈到react的高级组件，不免会想到组合，继承，Mixins，高阶组件，this.props.children。

react那些事儿的更多相关文章

  1. 【前端】react学习阶段总结，学习react、react-router与redux的这些事儿

    前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...

  2. react组件通信那些事儿

    父组件是调用组件的组件.现在看来,感觉父组件就是一个壳子,定义好壳子里面会有什么,而子组件是一个具体的实现,说明,会用到什么东西,如果有这些东西,会进行什么操作.总之,父组件是材料,有水和泥,子组件告 ...

  3. React Native填坑之旅--Button篇

    从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真 ...

  4. [译] Angular 2 VS. React： 血色将至

    Angular 2 VS. React: 血色将至 原文链接:https://medium.com/@housecor/angular-2-versus-react-there-will-be-blo ...

  5. 2015前端各大框架比较（angular,vue,react,ant）

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  6. React使用笔记(3)-React Event Listener

    Date: 2015-11-28 12:18 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1. 构造基本结构 首先,我们先创建一个按钮,一个输入框 ...

  7. 如何优雅的设计 React 组件

    作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...

  8. 如何优雅的设计React组件

    如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...

  9. 使用 js 设置组合快捷键，支持多个组合键定义，还支持 React

    ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈. ┆ ┆┆ □ ┆┆ ┈┤┆ < ┆ -__┘┆ ┆ ┆┆__ ┈┈┤ ╰ ...

随机推荐

  1. 使用pm2离线部署nodejs项目

    1.下载https://npm.taobao.org/mirrors/node/v8.11.1/node-v8.11.1-linux-x64.tar.xz 比如安装到/opt目录 xz -d node ...

  2. 好用的JS拖拽插件

    下载artDialog插件的时候发现它把拖拽单独封装成了一个方法,挺好用的,使用方法如下... 第一种拖拽方式-点击容器指定区域进行拖拽 $('.ui-dialog').on(DragEvent.ty ...

  3. jsp 错误处理

    JSP提供了很好的错误处理能力.除了在Java代码 中可以使用try语句,还可以指定一个特殊页面.当应 用页面遇到未捕获的异常时,用户将看到一个精心设计 的网页解释发生了什么,而不是一个用户无法理解的 ...

  4. h5 video标签的使用

     标签的布置 <video src="1.mp4" poster="1.jpg" id="vid" controls> 你的浏览 ...

  5. Nginx详解二十：Nginx深度学习篇之HTTPS的原理和作用、配置及优化

    一.HTTPS原理和作用: 1.为什么需要HTTPS?原因:HTTP不安全1.传输数据被中间人盗用.信息泄露2.数据内容劫持.篡改 2.HTTPS协议的实现对传输内容进行加密以及身份验证 对称加密:加 ...

  6. MySQL监控系统Lepus的搭建

    现在流行的监控系统很多,选择一个合适自己的就可以了,例如Zabbix.Nagios:监控MySQL为主的有MySQLMTOP.Lepus.本文主要介绍快速部署lepus以及监控MySQL,因为作为DB ...

  7. C++ 内链接 外链接

    编译的时候(假如编译器是VS),是以源文件cpp文件为单位,编译成一个个的obj文件,然后再通过链接器把不同的obj文件链接起来.如果一些变量或函数的定义是内连接的话,链接器链接的时候就不会拿它们去与 ...

  8. String 类的实现（1）浅拷贝存在的问题以及深拷贝实现

    1.   浅拷贝 : 也称位拷贝 , 编译器只是直接将指针的值拷贝过来, 结果多个对象共用 同 一块内存, 当一个对象将这块内 存释放掉之后, 另 一些对象不知道该块空间已经还给了系统, 以为还有效, ...

  9. unzip文件解压

    1.记录下,遇到.zip的安装包,指定解压到某个地方 格式:unzip      压缩包名.zip  -d   存放路径  

  10. 微信支付JSAPI掉不起来支付按钮是什么原因？（原创）

    两种可能: 1.支付页面的js参数有问题 2.微信支付的配置有问题,大概率在微信支付授权目录是否有填写正确