大纲

• 对编程的思考
• 介绍React
  • 优点介绍
  • 缺点与不足
• React技术栈
  • ECMAScript 6/7
  • React基础
  • Route
  • Redux
  • React开发的建议与思考
• 开发常用模块和工具推荐
  • 必须学习
  • 推荐使用
  • 强化学习
  • 基于react的其它技术
• 书籍/站点推荐
  • React
  • ES6/7
• 实际项目讲解

主体内容

用于给公司内部前端同事培训使用, 内容原创全手打及部分官网借阅, 支持公益传播与相互学习, 转载请注明出处.

对编程的思考

1. 编程就是将需求分解成一组数据结构加算法的过程.
2. 操作系统的根是文件, 文件是数据流的载体, 不用太区别前后端, 只不过是数据流向问题的具体化.
3. 面向对象和模板编程.
4. 编程是门艺术.

介绍React

• ALL IN JS.
• 数据驱动视图.

优点介绍

1. 全新的前端编程体验, 基于JSX语法
2. 组件化编程的集大成者
3. Facebook出品, 技术栈庞大, 第三方组件丰富, 全球开发者拥抱的技术
4. 入门快上手简单
5. React社区活跃, 基本上问题都可以在官方文档及第三方社区找到
6. 可以使用NodeJS社区内的万千轮子, 站在巨人的肩膀上创造
7. React促使大前端架构体系生成与加速成熟
8. 依赖于NodeJS代码书写规范, React第三方组件代码可读性远远大于传统jQuery插件代码

缺点与不足

1. 结构与写法有别于传统HTML
2. 技术栈相对庞大, 入门简单, 但深入学习曲线陡峭

React技术栈

ECMAScript 6/7

• 写代码的基础是读懂代码, 如果对React略有了解的同学都感觉到, JSX固然是React的基础, 但看看也可以看出个所以然, 然后照样画葫芦不难, 但是没有ES6基础的可能就会看的一头雾水, 毫不夸张的说ES6是React的基础, 是使用React的基石, 所以放在第一位.
• 箭头函数和Promise的出现解决了很多前端er头痛的难题, 比如回调地狱.

let和const

• 用于替代var申明变量, 都是块级作用域
• 同一个变量名只能申明一次
• const申明的变量值不能修改, 对象内部的值除外

箭头函数

由于ES6的规范实现让很多前端看到了美好和未来, 具有划时代的意义, 真正得实现了JS写起来和Python一样爽, 而且比Python还要灵活.

let myFun = () => 'I like es6';
// ========等价于==========
var myFun = function myFun() {
  return 'I like es6';
};

let reduxFun = ({dispatch, getState}) => next => action => 'I like es6'
// ========等价于==========
var reduxFun = function myFun(_ref) {
  var dispatch = _ref.dispatch,
      getState = _ref.getState;
  return function (next) {
    return function (action) {
      return 'I like es6';
    };
  };
};

解构赋值

含义: 根据数据结构特征得出对应关系, 代入变量赋值数据

// 用于结构赋值
let [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 3
let {a: x, b: y} = {a: 'c', b: 't'}; // x = 'c', y = 't'

import { compOne, compTwo } from 'component';

// 用于合并对象
let tech = {name: 'Vue', feel: 'great'};
let newTech = {...x, name: 'React'}; // newTech = {name: 'React', feel: 'great'}

// 用于方法传值

Promise 对象

之前写过NodeJS的Promise/A+规范, ES6的Promise更容易理解和使用.

let myPromise = new Promise((resolve, reject) => {
  if(...)resolve('success');
  if(...)reject('error');
});
myPromise()
  .then(success => success)
  .catch(error => error)

async/await实现异步

async/await实现异步是ES7的标准, JavaScript统治世界的雄心怎么可以少了协程的实现, 就等JS一年一变化剑指各平台开发语言.

let myFun = async (url) => await FetchData.get(url);
let data = myFun('/apis/getData'); // 直接返回请求返回的数据

循环数组

1. for(... in ...): 遍历返回数组的下标或者对象的键
2. for(... of ...): 遍历返回可迭代对象的元素
3. [].forEach(item => item): 遍历数组, 不改变数组的值
4. [].map(item => item): 遍历数组, 可以改变元素的值, 返回回调函数返回值的数组, JSX中用的最广泛的函数
5. Array.from([], item => item): 遍历数组, 返回回调函数内返回值的数组

Module 的语法

不知道是不是每个前端都会渴望前端模块化, 反正我是非常渴望的, 我是最后一批SeaJS的使用者, SeaJS通过玉伯的名气一夜成名, 却又急速得走向死亡, 当时RequireJS意气风发现到现在也没人再提(老系统估计还有在用的), 确实非常感谢React, React社区崇尚标准化, 促进JS一年一变强功不可没.

• 通过require方式导入

// ./mod.js
module.exports = ModName;
// ./use.js
let modName = require('./mod');

• 通过import方式导入

// ./mod.js
let myFun = param => param;
export default myFun;
// ./use.js
import myFun from './mod';

React基础

JSX

JSX是React的标志, 更是React的特点和优势, JSX改革了开发中的HTML的表现形式, 是All in js理念的完美实现, JSX语法很简单, 几乎看了就会

const name = 'React';
const element = <div className={{ width: '100%', height: '20px' }}>Hello, {name}</div>;

定义组件

// 摘自官网
class Clock extends React.Component {
  // 定义类, 继承自React.Component
  constructor(props) {
    super(props);
    // 向上继承props数据
    this.state = {date: new Date()};
  }

  componentDidMount() {
    // 组件生命周期函数, 组件渲染完后执行
  }

  render() {
    // 组件渲染函数
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
// 将组件对外提供出去
export default Clock();

修改state

React是数据驱动视图的, 那么如何知道什么时候该更新视图呢, 答案就是通过this.setState({})方法, 直接修改this.state的值是不会触发视图更新的, 可见this.setState()方法的重要性, 需要注意的是此方法更新视图为异步操作, 用当前状态的值更新下一个状态可能就会报错, 可以通过此方法解决:

// 错误
this.setState({
  counter: this.state.counter + this.props.increment,
});
// 正确
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

与DOM交互

通过定义ref='myDom'给HTML元素做标记, 通过this.refs.myDom取到Dom元素

JSX原型函数

// JSX组件
<MyButton color="blue" shadowSize={2}> Click Me </MyButton>
// 等价原型函数
React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

组件常用生命周期(非全部)

• componentWillMount()：组件加载前调用
• componentDidMount()：组件加载后调用
• componentWillUpdate(): 组件更新前调用
• componentDidUpdate(): 组件更新后调用
• componentWillUnmount()：组件卸载前调用
• componentWillReceiveProps()：组件接受新的参数时调用

注意项

1. JSX顶层包裹必须有且只有一层.
2. 用{}包裹里面可以放置js表达式.
3. JSX中className替代HTML的class, 且样式值是个对象需要用双括号包裹.
4. 列表渲染组件必须加上key值.
5. 定义事件函数为保证程序健壮和通用尽量使用这种方式: onClick={(e) => this.onClickHandler(e)}
6. 组件必须包含结束标志<myComp /> 或 <myComp> </myComp/>

Route

• route.js

import Comp1 from '/to/path/comp1';
import Comp2 from '/to/path/comp2';
import Login from '/to/path/login';

export default (
  <Route history={hashHistory}>
    <Route path="/" onEnter={EnterFun}>
      <Route path="/comp1" component={Comp1} />
      <Route path="/comp2" component={Comp2}/>
      <Route path="/login" component={Login}/>
    </Route>
    <Redirect from='*' to='/' />
  </Route>
)

• index.js

import routes from './route.js';
import { Router } from 'react-router';

ReactDOM.render((
  <Router routes={routes}/>
), document.getElementById('root'));

Redux

参见开发常用模块和工具推荐中的redux分享链接

React开发的建议与思考

1. 拒绝jQuery, 优先通过数据修改视图, 尽量少操作DOM.
2. 组件模块化, 减少组件间的关联和耦合度, 做到最大的可配置化.

开发常用模块和工具推荐

必须学习

• react-router 🔗, React路由组件
• react-redux 🔗, React技术架构中最流行的状态管理工具
• eslint 🔗, 代码书写规范
• webpack 🔗, 代码打包工具

推荐使用

• nvm 🔗, NodeJS版本管理工具
• yarn 🔗, npm替代工具, 有效降解模块多层次依赖

强化学习

• axios 🔗, 增强版fetch请求工具
• lodash 🔗, JS功能增加库
• NodeJS 🔗, React的基石
• less 🔗, css编译器
• mockjs 🔗, 前端模拟数据脱离后端独立开发
• babel 🔗, 用于代码转码, 只要知道干嘛的就可以了
• express 🔗, NodeJS常用后端框架, 简单易学, 用处广

基于react的其它技术

• Ant Design 🔗, 常用React-UI框架
• Dva 🔗, 常用脚手架
• Roadhog 🔗, 配套antd和Dva的配置工具

书籍/站点推荐

React

• React官网 🔗, 莫名心酸, 官网最初挂在facebook子域名下, 常年被墙
• React所有事件 🔗
• 组件生命周期及常用代码片段分析 🔗
• create-react-app 🔗, React框架搭建

ES6/7

• ECMAScript 6 入门 🔗, 阮一峰老师出品
• ES6-特性 🔗, ES 5与ES 6语法对比
• ES 6标准 🔗
• ES 7标准 🔗
• ES 6转ES 5 🔗