react

React学习笔记（六） 五、事件处理 React事件绑定属性的命名采用驼峰写法，不同于传统DOM全部小写。 如果采用JSX的语法，事件函数需要用大括号 {} 包裹函数名，不同于传统DOM字符串小括号的方式。 <button onClick={ activateLasers }> Activate Lasers </button> 在React中另一个不同是你不能使用返回 false 的方式阻止默认行为，必须明确使用 preventDefault 来阻止。 function handleClick() { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={ handleClick }> CLICK ME </a> ); React通常在元素初始渲染的时候提供一个事件，然后绑定给元素即可： class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn: true }; this.handleClick = this.handleClick.bind(this); } handleClick() { this

推荐 GitHub 上9 月份最受欢迎的 10 个 JavaScript 开源项目，在这些项目中，你有在用或用过哪些呢？ 1. 基于 Promise 的 HTTP 客户端 Axios https://github.com/axios/axios Stars 27786 Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。功能： ● 从浏览器中创建 XMLHttpRequest ● 从 node.js 中创建 http 请求 ● 支持 Promise API ● 拦截请求和响应 ● 转换请求和响应数据 ● 取消请求 ●自动转换 JSON 数据 ●客户端支持防止 XSRF 攻击 2. puppeteer https://github.com/GoogleChrome/puppeteer Stars 14892 Puppeteer 是用 JavaScript 测试 Web 应用程序的框架。Puppeteer 基本功能有： ● 生成屏幕截图和 PDF 页面。 ● 检索 SPA 并生成预渲染内容（即“SSR”）。 ● 自动提交表单，UI 测试，键盘输入等 ● 创建一个最新的自动测试环境。使用最新的 JavaScript 和浏览器功能，在最新版本的Chrome 中直接运行测试。 3. Web 前端UI 框架 Bootstrap

AngularJ.js 由google开发，2009年首次发布 很流行的前端框架 使用Angular.js创建第一个UI，成本很低 对于团队来说，AngularJ.js有许多很棒的工具可用 很适合创建一个快速、混合型复杂的解决方案 比起React，更合适于创建小型企业级应用 由Google负责维护基础包 React.js 由Facebook开发，2013年发布了第一个BSD license的开源版本 很容易扩展 状态可预测（更小的规模） 很适合大型的前端项目 相对较小的API 持续重复渲染的组件为日益增加的复杂性提供了有效的支撑 Ember.js 是一个JavaScript框架，由Yehuada katz开发，2011年发布 很活跃的社区 持续开发特性 很简单，很易于学习 稳定的性能 具有自主配置能力 两种数据绑定方式 加载和运行都很快 Aurelia.js 由Rob Eisenberg 开发，2015年1月发布 整洁的文档 结构合理（组成Aurelia.js模块既可以用于构建完整的框架也可单独使用） 具有两种能够和用户界面自动同步模块的数据绑定方式 高度易测的代码 各种各样额外的工具可用 可以得到开发者的商业支持 Meteor.js 由Meteor团队发开，2012年发布 很快速 很适合小型响应式应用 是一个全栈框架 能够在浏览器上根据数据的刷新进行实时渲染 能够与Apache

React Bootstrap React-Bootstrap 是一个可重复使用的 React 组件库，也是最受欢迎的前端框架之一。目前同样是在为1.0.0版本而积极开发中。 Ant Design 🇨🇳 遵循 Ant Design 规范，React Ant Design 是一个开箱即用的高质量 React 组件，包含一系列的组件和 demo 。 Semantic UI React Semantic UI 的官方 React 集成。目前已被 Netflix 和亚马逊采用。 MATERIAL-UI 一组实现了 Google 的 Material Design 全新设计语言的 React 组件。在 GitHub 上有超过5万个 star ，最受欢迎的 React 组件库之一。 Blueprint Blueprint是一个基于React的Web工具组件库。 它针对在现代浏览器和IE11中运行的桌面应用程序构建复杂，数据密集的Web界面。 React Suite 🇨🇳 React Suite 是一套 React 组件库，为后台产品而生。由 HYPERS 前端团队与 UX 团队打造，主要服务于公司大数据产品线。 Polaris shopify.com(国外著名电商网站)自家的React组件库 Elemental UI 一个轻量的React组件库，注意跟饿了么的 Element 区分开

关于react的引用 1、npm config set registry https://registry.npm.taobao.org 切换到国内环境 默认是国外安装但是慢 脚手架 npm i creat-react-app 先执行这个来让你的电脑可以安装react的脚手架 然后是 create-react-app 你要创建的组件名字 例如 create-react-app my-first-react 回车静静等待安装好 一般安装的很慢 2、 可以使用 以下来直接使用react < script src = "https://cdn.staticfile.org/react/16.4.0/umd/react.development.js" > < / script > < script src = "https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js" > < / script > < script src = "https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js" > < / script > 也可npm i react 和 npm install babel-cli 去里面寻找对应的文件 react 的使用

React介绍： React设计思想及其独特，属于革命性创新，性能出众，代码逻辑却非常简单。 模块化：是从代码的角度来进行分析的；把一些可复用的代码，抽离为单个的模块，便于项目的维护和开发。 组件化：是用UI界面的角度来进行分析的；把一些可复用的UI元素，抽离为单独的组件，便于项目的维护和开发。 React是如何实现组件化的：React中有组件化的概念，但是并没有像Vue这样的组件模板文件；React中，一切都是以JS来表现的。因此要学习React，JS要合格，ES6和ES7（async和await）要会用。 React中的核心概念： 1 虚拟DOM（Virtual DOM） 2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）。 React的基本使用： 安装：npm i -S react react-dom react：react 是React库的入口点 react-dom：提供了针对DOM的方法，比如：把创建的虚拟DOM，渲染到页面上。 React组件： React 组件可以让你把UI分割为独立、可复用的片段，并将每一片段视为相互独立的部分。 组件是由一个个的HTML元素组成的 概念上来讲, 组件就像JS中的函数。它们接受用户输入（props），并且返回一个React对象，用来描述展示在页面中的内容。 redux： 状态管理工具，用来管理应用中的数据。

封装 一个封装组件提供 props 控制其行为而不是暴露其内部结构。 耦合是决定组件之间依赖程度的系统特性。根据组件的依赖程度，可区分两种耦合类型： 当应用程序组件对其他组件知之甚少或一无所知时，就会发生松耦合。 当应用程序组件知道彼此的许多详细信息时，就会发生紧耦合。 松耦合是我们设计应用结构和组件之间关系的目标。 松耦合应用(封装组件) 松耦合会带来以下好处： 可以在不影响应用其它部分的情况下对某一块进行修改。、 任何组件都可以替换为另一种实现 在整个应用程序中实现组件复用，从而避免重复代码 独立组件更容易测试，增加了测试覆盖率 相反，紧耦合的系统会失去上面描述的好处。主要缺点是很难修改高度依赖于其他组件的组件。即使是一处修改，也可能导致一系列的依赖组件需要修改。 紧耦合应用(组件无封装) 封装 或 信息隐藏 是如何设计组件的基本原则，也是松耦合的关键。 信息隐藏 封装良好的组件隐藏其内部结构，并提供一组属性来控制其行为。 隐藏内部结构是必要的。其他组件没必要知道或也不依赖组件的内部结构或实现细节。 React 组件可能是函数组件或类组件、定义实例方法、设置 ref、拥有 state 或使用生命周期方法。这些实现细节被封装在组件内部，其他组件不应该知道这些细节。 隐藏内部结构的组件彼此之间的依赖性较小，而降低依赖度会带来松耦合的好处。 通信 细节隐藏是隔离组件的关键。此时

 关于react组件生命周期 react组件生命周期(通俗易懂点来说就是:react组件的一生),他的一生呢大概可分为四个阶段: 初始化(造就他) 更新(成长) 销毁(死亡) 错误处理(没想好怎么表达) 初始化阶段: 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下: constructor () -----------------用来做一些组件的初始化工作，如定义this.state的初始内容 static getDerivedStateFromProps() -----------------在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用,它应返回一个对象来更新 state，如果返回 null 则不更新任何内容 render() ----------------是纯函数（函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用）

React组件的生命周期理解 React组件的生命周期分为初始化，更新，销毁，错误处理四个阶段，每一个阶段又有若干个函数以响应不同的阶段。 生命周期函数图解： 初始化阶段的钩子函数 在组件初始化阶段会执行 1. constructor React类组件的构造函数在挂载之前被调用。在constructor构造函数中，先调用super(props)，将父组件传来的props绑定，在此函数中可以初始化state，将事件处理函数绑定到类实例上。 2. static getDerivedStateFromProps(props,state) getDerivedStateFromProps 是react16.3 之后新增的钩子函数，在组件实例化后，和接受新的props后被调用。他必须返回一个对象来更新状态，或者返回null表示不更新，父组件的props更新，所带来的的重新渲染也会触发此方法。在react16.3之前使用的是constructor+componentWillMount()。 3. render() render()方法在组件中是必须的，在render()函数中以jsx语法创建dom元素，或者渲染this.props和this.state中的数据 返回null。什么也不渲染 布尔值。什么都不渲染 render()方法必须是一个纯函数，不应该改变state

前言 现在主流的移动开发平台是Android和iOS，每个平台的开发技术和运行方式都不一样，大家都是针对每个平台开发应用。自然会存在一个移动应用产品要针对每个平台开发一套的现象，这样带来的问题则是开发成本高、效率低下，进而会有进行跨平台开发的需求。从最开始以Cordova为基础的Hybrid混合开发技术，到React Native的桥接技术，到现在新兴的Flutter技术，跨平台开发技术一直在演进。 目前主流跨平台框架简介 Cordova Cordova 是Apache旗下的一个开源的移动开发框架。它允许你使用WEB开发技术（HTML5、CSS3、JavaScript）进行跨平台开发。应用在每个平台的封装器中执行，并且依赖规范的API对设备进行高效的访问，比如传感器、数据、网络状态等等。 Cordova通过对HTML、CSS、JS封装为原生APP。Cordova将不同设备的功能，按标准进行了统一封装，开发人员不需要了解设备的原生实现细节，并且提供了一组统一的JavaScript类库，以及为这些类库所使用的设备相关的原生后台代码。因此实现了“write once, run anywhere”(一次开发，随处运行)。 Cordova前身是PhoneGap。2011年Adobe公司将其收购对其开源，并捐献给Apache，重新命名为Cordova。 React Native React