React.js课程大纲

2017课程大纲

React.js介绍

• React.js 是一个帮助你构建页面 UI 的库，它不是一个框架，它只是一个库。它只提供 UI （view）层面的解决方案。React 的组件就相当于 MVC 里面的 View层。
• React.js 将帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。
• 一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的，这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。

React.js知识点速学

• jsx 语法, 写结构的语法糖, 快速创建 dom 结构

  • 在 jsx 中嵌入表达式，jsx 本身作为表达式，在 jsx 中指定属性，在 jsx 中指定 children
  • jsx 中的防注入攻击, react 会把内容转成字符串
  • 写在 React 作用域内，使用点符号，大写开头的自定义组件
  • 运行时选择类型的解决方案
  • 在属性中使用表达式，字符串字面量，属性的默认值: true，属性的展开写法，字面量作为 children
  • jsx 作为 children，表达式作为 children，函数作为 children
    会被忽略的 Booleans, Null, Undefined, 不会渲染到页面

• 定义组件, 构建一个可维护的应用

  • 类式组件, 有完整的生命周期和内部状态
  • 函数式组件, 为渲染而生, 没有生命周期和内部状态
  • 使用 PropTypes 对 props 进行类型检查, 在开发期间规范代码和数据检测
  • 定义默认 props, 在没有传入 props 的时候, 保证有一个默认值
  • 使用 refs 得到真实的 DOM, 可以调用浏览器 dom 的 API
  • 使用 refs 得到类组件实例, 可以访问组件实例的方法和属性

• JSX中的事件系统Event

  • react 中的合成事件对象, 事件触发会往回调函数传入一个 event 对象, 这是 react 集成的, 也可以通过 event.nativeEvent 拿到原生事件对象
  • react 中支持的事件, react 中有着完善的事件支持, 而且不需要额外兼容

• props, 构建视图, 在组件直接建立沟通的桥梁

  • 组件之间的交流, 组件之间可以通过 prop 传递数据
    单向数据流, 组件的数据永远是从顶层流向底层, 这会带来清晰的数据流
  • props 只读, 属性是只读的, 这样会保护单向数据流的特性

• state, 更新视图, 把对页面的维护变成对数据的维护
  定义组件的内部状态, 内部状态意味它某个时刻可能会变化

  • react 更新视图的机制, 如果要修改 state, 应该使用 setState
  • state 的异步更新, 在一次事件循环中 state 不会马上改变
  • state 的合并更新, 多次 setStete 会合并在一起, 保证效率和性能
  • 让组件受控, 限制组件自身的行为, 接受 react 控制
  • setState API, 通过它来更新组件的状态

• 生命周期, 利用钩子函数更简便的参与页面的状态变化

  • Mounting 阶段
    
    • constructor(), 构造组件实例
    • componentWillMount(), 组件将要挂载之前
    • render(), 返回 jsx, 用于渲染
    • componentDidMount(), 组件挂载完成之后调用,可以在此发起数据请求
  • Updating 和相应的生命周期函数
    
    • componentWillReceiveProps(), 依赖于父组件更新阶段的 render 执行, 可以在此 setState
    • shouldComponentUpdate(), 可以拦截此次更新, 阻断 render 的执行, 在这里可以做一些性能优化的操作
    • render(), 返回 jsx, 用于渲染
    • componentDidUpdate(), 更新之后函数会执行
  • Unmounting 和相应的生命周期函数
    
    • componentWillUnmount(), 在组件卸载之前可以在此做一些清空操作, 比如不再等待数据返回, 清空定时器和事件

react-router-dom

• 构建多视图应用的最佳实践
• 不同类型的Router, 你应该把你的组件置于这个组件之下
  
  • BrowserRouter, 使用 html5 history api, 需要后端的服务器配置
  • HashRouter, 它使用起来兼容性更强, 也不需要在服务器做一些其他配置
• Link和 NavLink, 一个增强的 a 链接, 你可以使用它来跳转页面
• Route, 路由的核心组件, 如果 path 被匹配到, 它指定的组件会被渲染
  
  • 使用 component 渲染组件, 接受一个组件变量或回调函数用于渲染
  • 使用 render 渲染组件, 接受一个回调函数用于渲染
  • 使用 children 渲染组件, 接受一个回调函数用于渲染, 但此 route 一定会被匹配
  • match prop、location prop、history prop、被匹配到的组件可以通过不同的方式拿到以上三个组件
  • exact 级别的匹配, 这意味着你没法利用穿透特性去匹配路由
  • strict 级别的匹配, path 的后的 slash 大有不同, 它要求你的 location.pathname 也必须也有 slash
• Switch , 有时候你想让一个的 pathname 匹配到多个 Route 来组合你的页面, 但有时候你只想挑选其中一个, 使用 Switch
• Redirect 路由的重定向 , 如果它被渲染, 会重新跳转地址
• withRouter 可以跨层级拿到 match, location, history

redux状态管理

• 管理更复杂的应用状态, 提供可预测的状态管理
• action 动作, 如果你要修改数据, 你应该先发起一个动作
  
  • action type, action是一个对象, 它应该有一个 type 属性标明它的身份
  • action creater, 它用来创建 action, 有中间件参与有你还可以在里面封装逻辑和异步操作
  • 使用 bindActionCreators 绑定 action creater, 这样你就可以直接发起 action 啦
• reudcer , 计算出下一个应用状态
  
  • 纯函数, 确定的输入总会有相同的数据, 并且无副作用
  • 使用 combineReducers 合并子 reducers, reducer 只有一个, 此方法可以把你写的小 reducer 快速合并成一个
• middleware, 中间件, 捕捉每一次 action
  
  • 理解 middleware, 在 action 的发起到 reducer 的执行的期间, 你可以让 middleware 介入并做一些其他操作
  • 一个简单的 middleware, redux-thunk, 这样你的 action creator 可以返回更多的数据类型
• store, 应用中唯一 store, 使用这个对象用来维护整个应用的 state
  
  • getState 方法, 获取state
  • dispatch( action ), 更新 state
  • subscribe(listener) 注册监听器
• react-redux, 让 react 和 redux 连接起来
  
  • Provider 应用中最顶层的组件
  • connect, 连接 react组件 和 store, 这个高阶组件可以返回一个增强过后的组件, 如果你想让某个应用从 state 里面拿到数据, 使用 connect

webpack知识点

• 模块打包器, 除了分析 js 模块依赖, 配合相应的 loader 还可以对你的资源依赖进行分析和打包
• loader 相关, 在引入模块前, loader 会先预处理一下模块的内容
  
  • babel-loader 处理 js 模块, 配合不同的 babel 插件可以编译不同内容
  • css, style-loader 引入 css, 如果你要引入 css, 应该先让 css-loader 介入处理
  • file-loader 加载资源文件, css-loader 会帮你引入一些图片或者你会在 js 里面引入一些资源依赖, 这个时候需要你把这些路径和资源交给 file-loader 处理.
• plugin 相关, 插件会做一些 loader 做不来的事情, 它可能会在构建的不同时间点起作用
  
  • html-webpack-plugin
  • clean-webpack-plugin
  • ProvidePlugin, 更快速的引入模块
  • devtool 找到源码的位置
  • webpack-dev-server, 开发测试的利器