The Road to learn React书籍学习笔记(第一章)
react灵活的生态圈
Small Application
Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styling: plain CSS and inline style Asynchronous Requests: fetch Higher Order Components: optional Formatting: none Type Checking: none or PropTypes State Management: local state Routing: none or conditional rendering Authentication: Firebase Database: Firebase UI Components: none Time: moment or date-fns Testing: Jest
Medium Application
Boilerplate: create-react-app with eject Utility: JavaScript ES6 + Lodash or Ramda Styling: CSS modules or Styled Components Asynchronous Requests: fetch or axios Higher Order Components: maybe + optional recompose Formatting: Prettier Type Checking: none or Flow State Management: local state and very optional Redux Routing: React Router Authentication: Firebase Database: Firebase UI Components: none or Semantic UI Time: moment or date-fns Testing: Jest with Enzyme
Large Application
Boilerplate: create-react-app with eject or own boilerplate project Utility: JavaScript ES6 + Lodash or Ramda Styling: CSS modules or Styled Components Asynchronous Requests: axios Higher Order Components: maybe + optional recompose Formatting: Prettier Type Checking: Flow State Management: local state and Redux or MobX Routing: React Router Authentication: Solution with an own Express/Hapi/Koa Node.js Server with Passport.js Database: Solution with an own Express/Hapi/Koa Node.js Server with a SQL or NoSQL Database UI Components: Semantic UI or own implementation of UI components Time: moment or date-fns Testing: Jest with Enzyme
基本要求npm/node
Node包管理器(npm/node/package/manager)可以让你通过命令行安装第三方node包。这些包可能是一系列的工具函数、库、或者是集成的框架
零配置搭载react
npm install -g react-reate-app
运行
npm start
运行测试
npm test
构建项目产品文件
npm run build
ES6中的const
与let
被const
声明的变量不能被重新赋值或者是重新声明。可以使用它创建不可变数据结构。但如果创建的这个变量是数组或者是对象的时候,里面持有的内容可以被更新。 当一个变量需要被重新赋值的时候,应该使用let
去声明它
ReactDOM
简单地说,ReactDOM.render()
会使用JSX
替换HTML
中一个DOM
节点,这样可以很容易地React
集成到每一个其他的应用中。ReactDOM.render()
有两个传入参数,第一个是准备渲染的JSX
,第二个参数指定了React
应用在HTML
中放置的位置。
模块热替换
模块热替换(HMR)是一个帮助你在浏览器中重新加载应用的工具,并且无需让浏览器刷新页面。 在src/index.js
中添加一些配置代码
if(module.hot){module.hot.accept();}
代码改变后,浏览器就不会刷新页面,但是应用还是会重新加载并且正确的输出
JSX中复杂的JavaScript
定义一个列表
1 import React, { Component } from 'react'; 2 // import logo from './logo.svg'; 3 import './App.css'; 4 const list = [{ 5 title: 'React', 6 url: 'https://facebook.github.io/react', 7 author: 'Jordan Walke', 8 num_comments: 3, 9 points: 4, 10 objectID: 0, 11 }, { 12 title: 'Redux', 13 url: 'https://github.com/reactjs/redux', 14 author: 'Dan Abramov, Andrew Clark', 15 num_comments: 2, 16 points: 5, 17 objectID: 1, 18 }];
在JSX中使用HTML中的JavaScript是强大的,可以使用map
来将一个列表转换成另外一个列表。记得在React中添加一个辅助属性,给列表的每个成员加上一个关键字(key
)属性,这样就可以在列表发生变化的时候识别其中成员的添加、更改和删除的状态。不要错误地使用列表成员在数组的索引作为关键字,列表的成员索引是完全不稳定的
class App extends Component { render() { return ( <div className = "App"> {list.map(function(item){ return( <div key = {item.objectID}> <span> <a href= {item.url}>{item.title}</a> </span> <span>{item.author}</span> <span>{item.num_comments}</span> <span>{item.points}</span> </div> ); })} </div> ); } } export default App;
ES6 箭头函数
箭头函数表达式比普通的函数表达式更加简洁
//函数表示式 function(){...} //箭头函数 () => {...}
注意:如果函数只有一个参数,就可以移除参数的括号,但是如果有多个参数,就必须保留这个括号
//允许 item =>{...} (item) =>{...} (item,key) =>{...} //不允许 item,key =>{...}
上例可以改写为
class App extends Component { render() { return ( <div className = "App"> {list.map(item =>{ return( <div key = {item.objectID}> <span> <a href= {item.url}>{item.title}</a> </span> <span>{item.author}</span> <span>{item.num_comments}</span> <span>{item.points}</span> </div> ); })} </div> ); } }
另外在ES6的箭头函数中,可以简洁函数体来替换块状函数体(用花括号{}
表示),简洁函数体的返回不用显示声明,这样就可以移除掉return表示式,那再改简洁
class App extends Component { render() { return ( <div className = "App"> {list.map(item => <div key = {item.objectID}> <span> <a href= {item.url}>{item.title}</a> </span> <span>{item.author}</span> <span>{item.num_comments}</span> <span>{item.points}</span> </div> )} </div> ); } }
ES6类
javaScript ES6中引入了类的概念。类通常在面向对象编程语言中被使用,可以根据使用情况一边使用函数式编程一边使用面向对象编程 尽管React为了例如不可变数据结构等的特征而拥抱函数式编程,但是它还是使用类来声明组件,这些组件就被称为ES6组件,React混合使用了两种编程范式中的有益部分
例如下面这个Developer类
class Developer{ constructor(firstname,lastname){ this.firstname = firstname; this.lastname = lastname; } getName(){ return this.firstname + '' +this.lastname; } }
类都有一个用来实例化自己的构造函数,这个构造函数可以用来传入参数来赋予给类的实例。此外,类可定义函数,因为这个函数被关联给了类,所有它被称为方法,通常它被当称为类的方法。 实例化上面的Develper类,以及使用它的方法
const Lbh = new Developer('Lai','binhong'); console.log(Lbh.getName());
React 使用JavaScript ES6类来实现 ES6组件
import React, {Component} from 'react'; class App extends Component { render(){ ... } }
App类
继承自Component
,你可以声明App组件,但是这个组件需要继承自另一个组件,继承的意思就是在一个面向对象编程的语言中,你要需要遵循继承原则, 它可以把功能从一个类传递到另一个类
这个App类就从Component类中继承了它的功能,这个Component类是从一个基本ES6类中继承来的ES6组件类。它 有一个React组件所需要的所有功能。渲染(render
)方法就是其中可以使用的一个功能。 这个Component 类封装了所有React类需要的细节。 React Component
《react 学习之道》书籍地址:https://leanpub.com/the-road-to-learn-react-chinese/
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Dubbo 源码分析 - 自适应拓展原理
1.原理 我在上一篇文章中分析了 Dubbo 的 SPI 机制,Dubbo SPI 是 Dubbo 框架的核心。Dubbo 中的很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等。有时,有些拓展并非想在框架启动阶段被加载,而是希望在拓展方法被调用时,根据运行时参数进行加载。这听起来有些矛盾。拓展未被加载,那么拓展方法就无法被调用(静态方法除外)。拓展方法未被调用,就无法进行加载,这似乎是个死结。不过好在也有相应的解决办法,通过代理模式就可以解决这个问题,这里我们将具有代理功能的拓展称之为自适应拓展。Dubbo 并未直接通过代理模式实现自适应拓展,而是代理代理模式基础上,封装了一个更炫的实现方式。Dubbo 首先会为拓展接口生成具有代理功能的代码,然后通过 javassist 或 jdk 编译这段代码,得到 Class 类,最后在通过反射创建代理类。整个过程比较复杂、炫丽。如此复杂的过程最终的目的是为拓展生成代理对象,但实际上每个代理对象的代理逻辑基本一致,均是从 URL 中获取欲加载实现类的名称。因此,我们完全可以把代理逻辑抽出...
- 下一篇
给初学者的深度学习入门指南
想入门深度学习的你会不会有这样的疑问呢? “非计算机专业能学会使用深度学习吗?” “线性代数和概率统计快忘完了,英语也只是四级飘过,能学会使用深度学习吗?” “甚至连最容易学的Python语言也不会,有机会吗?” 很巧,我在一年前也向别人问过类似的问题。 我的答案是:学会使用绝对没问题,毕竟不需要自己凭空创造嘛。 可以这么说吧,人工智能犹如造车运动,可以分为两大阶段。 • 第一阶段:关键部件的研发 (1)算法的研发: 这个阶段有吴恩达、李飞飞、GeoffreyHinton、Ian Goodfellow等传奇人物的卓越贡献 (2)工具框架的研发: 这个阶段有谷歌等巨头的卓越贡献 • 第二阶段:各个部件的组装 第一个阶段的工作已有行业巨头和技术大佬完成,我们可以做的就是用好这些技术和工具,来完成自己的工作。所以一般情况下,对于小白,推荐的学习路线如下: 1. 掌握编程工具,推荐Python 2. 掌握一些基本的数学知识 3. 理解机器学习理论和算法 4. 掌握必要的深度学习框架 5. 了解行业最新动态和研究成果 非计算机专业如何转行使用深度学习 深度学习人才可以分为两类,一类是创造深度学习...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2全家桶,快速入门学习开发网站教程
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS8编译安装MySQL8.0.19
- Docker安装Oracle12C,快速搭建Oracle学习环境
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题