首页手记跟我一起自学React——第一章

跟我一起自学React——第一章

标签：

Node.js React.JS

初识

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于2013年5月开源，是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图），拥有较高的性能，代码逻辑非常简单。

相知

React特点

声明式设计 −React采用声明范式，可以轻松描述应用。
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React生命周期

getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默认属性.
getInitialState() 在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state，此时可以访问this.props
componentWillMount() 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。
render() react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行，此时就不能更改state了。
componentDidMount() 组件渲染之后调用，只调用一次。
componentWillReceiveProps(nextProps) 组件初始化时不调用，组件接受新的props时调用。
shouldComponentUpdate(nextProps, nextState) react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候
componentWillUpdata(nextProps, nextState) 组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
render() 组件渲染
componentDidUpdate() 组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
componentWillUnmount() 组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

相惜

React安装

下载直接引用

React 可以直接下载使用，下载包中也提供了很多学习的实例。
本教程使用了 React 的版本为 16.4.0，你可以在官网 https://reactjs.org/ 下载最新版。
官方提供的 CDN 地址：

  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 生产环境中不建议使用 -->
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<font color="#dd0000">注意: </font>在浏览器中使用 Babel 来编译 JSX 效率是非常低的。

npm安装

如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。
我们建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。
国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

  $ npm install -g cnpm --registry=https://registry.npm.taobao.org
  $ npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

  $ cnpm install [name]

create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境，能自动创建的项目是基于 Webpack + ES6 。

  $ cnpm install -g create-react-app
  $ create-react-app my-app
  $ cd my-app/
  $ npm start

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：

项目的目录结构如下：

  my-app/
    README.md
    node_modules/
    package.json
    .gitignore
    public/
      favicon.ico
      index.html
    src/
      App.css
      App.js
      App.test.js
      index.css
      index.js
      logo.svg

公告

以后每月5、15、25号更新原创文章，内容不限，喜欢小编的可以点击关注，也可在下方评论留言，你喜欢什么内容，小编根据大家喜欢的内容尝试更新

点击查看更多内容