React及npm、ES6

※记住这一点，React项目的基本项目结构包含如下内容:
1.一个源文件夹，用于包含全部JavaScript模块。
2. 一个index . html文件。在React应用程序中，HTML页面几乎是空的。它只负责加载应用程序的JavaScript并提供div(其实是任何其余元素)，React使用这个div将应用程序的组件呈现到其中。
3.一个package.json文件。package.json是一个标准的npm清单文件，其中包含关于项目的各类信息，如名称、描述、做者信息等。它容许开发人员指定依赖项(能够自动下载和安装)并定义脚本任务。
4.模块包装器或构建工具，将用于JSX转换和模块/依赖项绑定。使用模块能够将JavaScript代码分解为多个文件，每一个文件声明本身的依赖关系，从而帮助组织代码。模块捆扎器而后自动按正确的加载顺序将全部东西打包在一块儿。有不少工具能够处理这个中间步骤，包括Grunt, Gulp,和 Brunch等。您能够很容易地在这些工具中找到React的方法，可是整体来讲，React社区已经将webpack做为这项工做的首选工具。webpack的核心是一个模块绑定器，但它也能够经过加载器来转换和编译源代码。

 

※.组件的用法与原生的 HTML 标签彻底一致，能够任意加入属性，好比 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性能够在组件类的 this.props 对象上获取，好比 name 属性就能够经过 this.props.name 读取。

添加组件属性，有一个地方须要注意，就是 class 属性须要写成 className ，for 属性须要写成 htmlFor ，这是由于 class 和 for 是 JavaScript 的保留字。

 

来源：http://www.ruanyifeng.com/blog/2015/03/react.html

 

※.若是组件类建立、组价类实例化对象不在同一个js文件中，要将组件类export

 

※React 组件

React组件只是一个JavaScript类，带有一个render方法，返回组件UI的描述

a React component is simply a JavaScript class with a render method that returns a description of the component’s UI

 

※React中import的用法

import defaultcomponent,{a,b,c...} from 'XXX'
eg: import React,{Component} from 'react';
导入‘react’文件里export的一个默认的组件，将其命名为React以及Component这个非默认组件
import defaultcomponent form 'XXX'
导入XXX文件中的默认组件，命名为defaultcomponent
import {a} from 'XXX'
导入XXX文件中的a组件
import {a as b} from 'XXX'
导入XXX文件中的a组件，并将其重命名为b
import * as a from 'XXX'
导入XXX文件中的全部组件，并将其命名为a，调用具体组件的方式为a.b、a.c。。。但不包含默认组件
资料：https://blog.csdn.net/naxieren1992/article/details/79582484

 

 ※.

有2个{{}}，第一{}表明jsx语法开始，第二个是表明dangerouslySetInnerHTML接收的是一个对象键值对;

 &&event.target.value

 && event.preventDefault()

防止连接打开 URL：阻止元素发生默认的行为; 提交按钮时阻止对表单的提交

 

※react-dom

react-dom这个软件包提供了针对DOM的方法，能够在你应用的顶层调用，也能够在有须要的状况下用做到React模型外面的逃生出口。你的大部分组件都不该该须要使用这个包。

资料：ReactDOM

 

※React 组件生命周期

React：组件的生命周期

 

componentWillMount和componentDidMount的区别

一、componentWillMount  将要装载，在render以前调用；

      componentDidMount，（装载完成），在render以后调用

二、componentWillMount  每个组件render以前当即调用；

      componentDidMount  render以后并不会当即调用，而是全部的子组件都render完以后才能够调用

三、componentWillMount  能够在服务端被调用，也能够在浏览器端被调用；

      componentDidMount  只能在浏览器端被调用，在服务器端使用react的时候不会被调用

 

※改变嵌套数组

1.npm install react-addons-update --save

2.import update from 'react-addons-update';

3.let student = {name:'John Caster', grades:['A','C','B']}

let newStudent=update(student,{grade:{$push:['A']}})    ——push：后面追加

let newStuent=update(student,{grade:{$set:['A']}})    ——set： completely change the array

 

※fetch    fetch使用

get使用：

1.引入依赖插件   import 'whatwg-fetch'

2.方法的第一个参数是 url 第二个参数是配置信息。

3.fetch 方法请求数据，返回的是一个 Promise 对象

 

 post使用：

1.fetch 发起一个 post 请求（有method: 'POST'），第一个参数是 url，第二个参数是配置信息。

 

fetch 提交数据以后，返回的结果也是一个 Promise 对象，跟 get 方法同样，处理方式也同样。

 

※强大的拖拽组件：React DnD 的使用

 

collect

 

 

参数 monitor

monitor 用于查询当前的拖拽状态，其对应实例内置了不少方法。

 

※.React 动画

建立 React 动画的五种方式

React.js 实现动画效果

React动画实践

 

※.生命周期

两种可以用在 ES6 类组件中的生命周期方法：constructor() 和 render()。

constructor（构造函数）只有在组件实例化并插入到 DOM 中的时候才会被调用。组件实例 化的过程称做组件的挂载（mount）。

render() 方法也会在组件挂载的过程当中被调用，同时当组件更新的时候也会被调用。每当 组件的状态（state）或者属性（props）改变时，组件的 render() 方法都会被调用。 

 

在组件挂载的过程当中还有另外两个生命周期方法：componentWillMount() 和 componentDidMount()。构造函数（constructor）最早执行，componentWillMount() 会在 render() 方法以前 执行，而 componentDidMount() 在 render() 方法以后执行。 

 

 

※.tips

1.绑定的步骤是很是重要的，由于类方法不会自动绑定 this 到实例上。

每次 render() 方法执行时绑定类方法。总结来讲组件 每次运行更新时都会致使性能消耗。当在构造函数中绑定时，绑定只会在组件实例化时运 行一次，这样作是一个更好的方式。

类方法能够经过 ES6 的箭头函数作到自动地绑定。 

 

2.当你使用 ES6 编写的组件有一个构造函数时，它须要强制地调用 super(); 方法，由于这个 App 组件是 Component 的子类。

3.fitler 方法以一个函数做为输 入。这个函数能够访问列表中的每一项，由于它会遍历整个列表。经过这种方式，你能够 基于过滤条件来判断列表的每一项。若是该项判断结果为 true，则该项保留在列表中。

4. includes 功能

 5.解构

 

6. 函数式无状态组件: 这类组件就是函数，它们接收一个输入并返回一个输出。输入是 props，输出就是一个普通的 JSX 组件实例

 

 7. Object.assign() 函数:它把接收的第 一个参数做为目标对象，后面的全部参数做为源对象。而后把全部的源对象合并到目标对 象中。只要把目标对象设置成一个空对象，咱们就获得了一个新的对象。当遇到相同的属性时，排在后面的对象会覆写先前对象的该属性。

8.扩展操做符。它只由三个点组成：...。当使用它时，数组 或对象中的每个值都会被拷贝到一个新的数组或对象。 

9.全部从父组件传递给子组件的 props 都会基于子组件的 PropTypes 接口获得验 证。

10.ref 属性可让咱们访问元素中的一个 节点。

11.高阶组件（HOC）是 React 中的一个高级概念。HOC 与高阶函数是等价的。它接受任何输 入 - 多数时候是一个组件，也能够是可选参数 - 并返回一个组件做为输出。返回的组件是 输入组件的加强版本，而且能够在 JSX 中使用。

 

12.路由基础：开始一个React项目（三）路由基础（v4）

 

React相关：

1.NPM:

参考：npm使用入门  npm 学习笔记整理

 

2.ES6参考：ES6

let命令：ES6新增了let命令，用来声明变量。它的用法相似于var，可是所声明的变量，只在let命令所在的代码块内有效。

const命令：const声明一个只读的常量。一旦声明，常量的值就不能改变。

const的做用域与let命令相同：只在声明所在的块级做用域内有效。

资料：React 语法之let和const命令

箭头函数：箭头函数

ES6:ES6（阮一峰）学习总结

 

super：super关键字用于访问和调用一个对象的父对象上的函数。

资料：super

copyWithin(被覆盖起始位置，选取的数据起始位置，选取额数据结束位置)

fill(被填充数据，起始位置，结束位置)

 

then()和catch()方法：《ES6标准入门》（六）之Promise对象2——then()和catch()方法

then方法，依次指定了两个回调函数。第一个回调函数完成之后，会将返回结果做为参数，传入第二个回调函数。

若是该对象状态变为resolved，则会调用then方法指定的回调函数；若是异步操做抛出错误，状态就会变为rejected，就会调用catch方法指定的回调函数，处理这个错误。

 

xxx.bind(null,x) :bind方法第一个参数是改变这个this的指向,不须要改变this指向，因此传入了一个null,第二个及后面的参数则是对应传入xxx函数的参数

 

apply()与call()的区别:

apply：调用一个对象的一个方法，用另外一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

call：调用一个对象的一个方法，用另外一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

 

location.hash详解

window.location.hash  锚点。获得的是url中#部分。

 

3.从零开始搭建一个react项目   React项目从开发到上线运行全过程

4.手把手教你用git

5.阮一峰JS资料

6.webpack