为了账号安全,请及时绑定邮箱和手机立即绑定

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

2018.07.19 18:04 1144浏览
初识

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

相知

React特点

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

React生命周期

React生命周期

  1. getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默认属性.
  2. getInitialState() 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state,此时可以访问this.props
  3. componentWillMount() 组件初始化时只调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。
  4. render() react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行,此时就不能更改state了。
  5. componentDidMount() 组件渲染之后调用,只调用一次。
  6. componentWillReceiveProps(nextProps) 组件初始化时不调用,组件接受新的props时调用。
  7. shouldComponentUpdate(nextProps, nextState) react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候
  8. componentWillUpdata(nextProps, nextState) 组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state
  9. render() 组件渲染
  10. componentDidUpdate() 组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。
  11. 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/ ,结果如下图所示:
React预览

项目的目录结构如下:

  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号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 去赚学费 帮助中心 APP下载
官方微信

举报

0/150
提交
取消