react那些事儿

一、参考链接
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那些事儿的更多相关文章

【前端】react学习阶段总结，学习react、react-router与redux的这些事儿
前言借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...
react组件通信那些事儿
父组件是调用组件的组件.现在看来,感觉父组件就是一个壳子,定义好壳子里面会有什么,而子组件是一个具体的实现,说明,会用到什么东西,如果有这些东西,会进行什么操作.总之,父组件是材料,有水和泥,子组件告 ...
React Native填坑之旅--Button篇
从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真 ...
[译] Angular 2 VS. React：血色将至
Angular 2 VS. React: 血色将至原文链接:https://medium.com/@housecor/angular-2-versus-react-there-will-be-blo ...
2015前端各大框架比较（angular,vue,react,ant）
前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...
React使用笔记(3)-React Event Listener
Date: 2015-11-28 12:18 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1. 构造基本结构首先,我们先创建一个按钮,一个输入框 ...
如何优雅的设计 React 组件
作者:晓冬本文原创,转载请注明作者及出处如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...
如何优雅的设计React组件
如何优雅的设计 React 组件如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...
使用 js 设置组合快捷键，支持多个组合键定义，还支持 React
╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈. ┆ ┆┆ □ ┆┆ ┈┤┆ < ┆ -__┘┆ ┆ ┆┆__ ┈┈┤ ╰ ...

随机推荐

SSM框架整合篇
目录 SSM整合框架搭建步骤 SSM整合 Author:SimpleWu github(已上传SSMrest风格简单增删该查实例):https://gitlab.com/450255266/code ...
iframe内容自适应高度
一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe ...
ubuntu MySQL的安装
https://i.cnblogs.com/EditPosts.aspx?opt=1 https://juejin.im/entry/5adb5deff265da0b9d77cb3b MySQL Co ...
20165314 2016-2017- 3《Java程序设计》第2周学习总结
20165314 2016-2017- 3<Java程序设计>第2周学习总结教材学习内容总结 byte<short<char<int<long<float& ...
C++ GetComputerName()
关于函数“GetComputerName()”,参考:https://msdn.microsoft.com/en-us/library/windows/desktop/ms724295(v=vs.85 ...
linux基础练习题（1）
Linux命令作业(关卡一) 练习题1 理解操作系统的作用,以及各种操作系统的不同要求: 简述什么是OS 简述应用程序.硬件.OS的关系列举出3种常见的操作系统简述Ubuntu和Linux的关系 ...
Deap thinking
它使任何人离任何问题的答案间的距离变得只有点击一下鼠标这么远! ---------<美国周刊> ---------周志华<机器学习> 所以我们更应该学会Deep Think ...
2017-2018-2 20165328 实验三《敏捷开发与XP实践》实验报告
一.实践-1: 要求:参考http://www.cnblogs.com/rocedu/p/6371315.html#SECCODESTANDARD安装alibaba插件,解决代码中的规范问题. 在ID ...
MyBatis - 3.Mapper XML映射文件
SQL 映射文件有很少的几个顶级元素(按照它们应该被定义的顺序): cache – 给定命名空间的缓存配置. cache-ref – 其他命名空间缓存配置的引用. resultMap – 是最复杂也是 ...
腾讯应用宝Android 应用加固（乐固）操作说明（转）
此处引用腾讯云对加固的优点说明如下: 为什么应用需要加固? 若应用不做任何安全防护,极易被病毒植入.广告替换.支付渠道篡改.钓鱼.信息劫持等,严重侵害开发者的利益. 应用进行安全防护,防止应用分发后, ...

react那些事儿

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

随机推荐

热门专题