github地址：https://github.com/feddiyao/react-base-framework.git

• DOM 浏览器中的概念 用JS对象表示页面中的元素并提供操作对象的api

• 虚拟DOM 框架中的概念 用JS对象模拟页面上的DOM和DOM嵌套，主要目的是实现页面上元素的高效更新

• Diff算法 ：tree diff, component diff, element diff

• webpack :
  快速初始化项目： npm init -y
  新建目录： dist 产品目录 src 源代码路径
  在src目录下创建index.html,main.js文件
  使用cnpm安装webpack，运行 cnpm i webpack webpack-cli -D

在 package.json 文件里面的【devDependencies】和【dependencies】对象有什么区别呢？
devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。
在 package.json 文件里面提现出来的区别就是，使用 --save-dev 安装的 插件，被写入到 devDependencies 对象里面去，而使用 --save 安装的插件，责被写入到 dependencies 对象里面去。
npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象 -S就是–save的简写
npm i module_name -D => npm install module_name --save-dev 写入到 devDependencies 对象
npm i module_name -g 全局安装 i 是install 的简写

• 实时打包工具： cnpm i webpack-dev-server -D 在scripts中配置dev 为 webpack-dev-server ，当我们运行npm run dev时会自动找寻webpack-dev-server

注意: webpack-dev-server打包好的js文件是托管到内存中的，所以在项目的目录中看不见。

• react安装：
  npm i react react-dom -S
  react: 专门用来创建组件和虚拟DOM的
  react-dom: 专门进行DOM操作的

React.createElement(创建的元素类型， 一个对象表示当前这个DOM元素的属性， 子节点，其他子节点)
ReactDom.render(要渲染的那个虚拟DOM元素，指定页面上一个容器)

const myh1 = React.createElement(‘h1’, {id: ‘mh1’, title:‘this is a div’}, ‘这是一个大大的h1’);
const myhdiv = React.createElement(‘h1’, {id: ‘mh1’, title:‘this is a div’}, myh1);
ReactDom.render(myh1, document.getElementbyId(‘app’));

由于上述的方式过于麻烦，我们通过jsx（在html中混合写入js的语法）的方式来解决这个问题，babel会把jsx转换成createElement形式来执行

const mydiv = <div id = "mydiv" title="div aaa">这是一个div元素</div>
ReactDom.render(mydiv, document.getElementbyId(‘app’));

• babel配置
  安装babel插件：
  cnpm i bable-core babel-loader babel-plugin-transform-runtime -D
cnpm i bable-preset-env babel-preset-stage-0 babel-preset-react -D

由于webpack只能打包处理.js后缀名的文件，像.png .vue 无法主动处理，所以要配置第三方的loader; 在module，rules中进行以下配置：

test: /.js|jsx$/, use: ‘babel-loader’, exclude:/node_modules/

在项目根目录创建.babelrc文件

{
“presets”:[“env”, “stage-0”, “react”],
“plugins”:[“transform-runtime”]
}

• .map的方式可以用来展开数组，如果箭头函数右边只有一行代码，可以干掉花括号和return

• js加分号的情况：
  下一行的开头是| ( + - /这五个符号之一的，必须要加分号。

• for循环都要加入key，不然在dom元素变换的时候会混乱

• jsx中元素添加类名，需要用className来代替class，htmlFor来替代label的for属性

• 如果在一个组件中return一个null则表示此组件什么都不渲染

• 可以用...props来进行属性的传递

• 组件的名称首字母必须是大写的

• 可以进行webpack配置进行文件的后缀名省略，按照配置的顺序补全

• 也可以进行根目录的配置，这样在项目中就可以直接用@符号表示跟目录中src的一层路径，这样在组件导入的时候就不会出现问题

resolve: {
   extensions: ['.js', 'jsx', '.json'],
   alias: {'@': path.join(__dirname, './src')}

}

• class关键字创建组件
  ES6中class关键字是面向对象的新形式
  通过实例访问到的属性叫实例属性，通过构造函数直接访问到的属性叫做静态属性
  静态属性和静态方法都需要static关键字进行区分
  如果一个子类通过extends关键字继承了父类，那么在子类的constructor中必须要调用一下super()
  super() 是一个函数，而且是父类的构造器，子类中的super其实是父类中的构造器的引用
  语法规范：在子类中this必须放在super之后
  基本组件结构语法：

class 组件名称 extends React.Component {
	render() {
		return <div>这是class创建的组件</div>
	}
}

• props区别：在function创建的组件中要进行props的接收，在class创建的组件中则不用，我们直接通过this.props来调用就可以了

• 两种创建组件方式的对比：
  class 创建组件有自己的私有数据和生命周期，但是用function创建的组件，只有props，没有自己的私有数据和生命周期
  class创建的组件叫有状态组件（有state)，普通的function函数创建的组件叫无状态组件(无state )
  所以很好得到结论，如果一个组件需要有自己的私有数据，则推荐有状态组件；无状态组件由于没有自己的私有数据和生命周期，运行效率会比较高。

• props和state的区别
  props中的数据都是外界传过来的
  state中的数据都是组件私有的（通过ajax获取回来的数据，一般都是私有数据）
  props中的数据都是只读的，不能重新赋值
  state中的数据都是可读可写的。

• css配置
  cnpm i style-loader css-loader -D
  在rules中进行下面配置：

{test: /.css$/, use:[‘style-loader’, ‘css-loader’]}

注意：在上面的配置中，对于处理，先会用css-loader进行处理，然后会把结果交给style-loader进行处理，直到找不到前一个loader，再把打包后的结果交给webpack来进行处理。
为了使得css只在一个模块里面起作用，我们重新配置rules：

{test: /.css$/, use:[‘style-loader’, ‘css-loader?modules’]}

在启用模块化以后，import接收的不再是空对象了，而是一个有具体属性的对象。
css模块化只针对类选择器和id选择器生效，对于标签选择器则不会模块化。

使用loacalIdentName可以自定义生成的类名格式，可选的参数有：
[path] 表示样式表相对于项目根目录所在路径
[name]表示样式表文件名称
[local]表示样式的类名定义名称
[hash:length]表示length位的哈希值

被:global()包裹起来的类名不会被模块化，而是会全局生效。
被:local()包裹起来的类名会被模块化，即默认情况下的操作。

如果在引用某个包的时候 这个包被安装到了node_modules目录中，则可以省略node_modules这一层目录直接以包名开始引入自己的模块或样式表
打包处理字体文件的loader
cnpm i url-loader -D

{test:/.ttf|woff|woff2|eot|svg$/, use: ‘url-loader’},

考虑到对node_modules里面的配置的排除，规定第三方的样式表都以.css结尾，自己的样式表都要以.scss或.less结尾，只用.scss或.less启用模块化
cnpm i sass-loader node-sass -D

{test： /.scss$/, use:[‘style-loader’, ‘css-loader?modules’,‘sass-loader’]}

• 绑定事件
  react中名称的首字母必须要大写 onClick、onMouseOver
  事件的处理函数必须是以下的格式：

onClick = { function }

• react中修改状态值

this.setState

• 注释折叠

//#region
//#end

• react是单项绑定的，vue通过v-model实现双向绑定，所以react需要定义onchange函数，或者提供一个read-only属性

• 通过this.ref.txt 或 e.target 的方式获取元素的value值