构造函数

继承 && 动静态方法(静态方法不能用this,调用直接用构造函数名.静态方法名())

①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype

  1. //ES5
  2. function Person(name,age){
  3.     this.name=name;
  4.     this.age=age;
  5. }
  6. Person.prototype.say=function(){};//动态方法(实例化才能使用)
  7. Person.say=function(){};//静态方法< Person.say()直接调用 >
  9. function Student(name,age,school){//继承
  10.     Person.call(this,name,age);//借用构造函数
  11.     this.school=school;
  12. }
  13. Student.prototype=Object.create(Person.prototype);//避免引用传递
  14. Student.prototype.constructor=Student;//不指定的话,constructor指向的是Person
  15. Student.prototype.say=function (){
  16.     // 重写父类的方法;及在子类调用父类的方法
  17.     return Person.prototype.say.call(this)+this.school;
  18. }
  21. //ES6: 类的继承:
  22. class Person {
  23.     constructor(name, age) {
  24.         this.name = name;
  25.         this.age = age;
  26.     }
  27.     say() {
  28.         return this.name + "," + this.age;
  29.     }
  30. }
  31. let p = new Person("张三", 13);
  32. console.log(p.say());
  33. /******************/
  34. class Student extends Person {
  35.     constructor(name, age, school) {//构造函数(器)-一定要传,不然就收不到
  36.         super(name, age);//借用了父类的构造函数初始化自己
  37.         this.school = school;
  38.     }
  39.     say() {
  40.         return super.say() + "," + this.school;
  41.     }//动态方法(实例化才能使用)
  42.     static say(){}//静态方法< Person.say()直接调用 >
  43. }
  44. let s = new Student('李四', 23, '千锋');
  45. console.log(s.say());
  47. new的时候发生四件事情:
  48. 1. 产生一个实例对象
  49. 2. 改变this,构造函数的ths指向实例
  50. 2. 执行这个构造函数
  51. 4. 返回新创建的对象

ES6导入导出

  1. 1. 
  2. export default {a:5};//默认导出
  3. import obj from "路径path"
  5. 2. 
  6. export const a=5;//导出多个
  7. export const b=5;
  8. 解构导入:import {a,b} from "路径path"
  9. 默认导入全部:import * as (别名)obj from "路径path"

准备工作

  1. 声明式:告诉他他会帮你生成;命令式(jQuery)
  2. 组件化-复用,模块化
  3. 一次学习,随处编写-不仅可以做网页应用(webAPP),也可以做原生(Android和iOS应用程序)的开发(react-native)

开发环境

基于组件化开发的库
react..min.js,react-dom.min.js,Browser.min.js ,它们必须首先加载。
其中，react,js 是React的核心库，react-dom.js 是提供与DOM相关的功能，Browser.js 的作用是将JSX语法转为JavaScript语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。 react.min.js包括了react核心算法diff ，虚拟dom模型(是存在内存里描述DOM的js数据,具有性能提升,加快渲染速度)，react 事件机制
react-dom.min.js封装了操作react组件API
borwser.min.js解析jsx，将js内的html代码解析出来返回给浏览器

Ⅰ、引用文件的方式
  1. 1) clear清屏
  2. cd 到写代码的文件夹(项目目录)
  3. npm init -y(新建package.json;-y的作用是不用一步步敲回车确认)
  5. 2) yarn add react / cnpm i react -S (装核心包,核心包是一致的)
  6. 找到node_module/react/umd(不要去找同级的cjs文件夹下的) -->
  7. 其中react.development.js是开发版,没有压缩;react.production.min.js是压缩版。
  8. 拷贝react.development.js到根目录下新建的js里面
  10. 3) yarn add react-dom / cnpm i react-dom -S
  11. react-dom/umd/react-dom.development.js拷贝到js下(开发不同类型,再安装不同的包,而核心包是一致的)
  13. 4) html内的script标签:先引入核心包react,在引入react-dom
  14. ??render不能解析HTML -->解决:安装babel-standalone,在script上添加type="text/babel"解析jsx,就可以直接写html标签了。 注意: render只会执行一次,且执行的是最后一次。
  16. cnpm i babel-standalone -S(加-S会在package.json中显示版本号,省略之后没有)
  17. babel-standalone/babel.js拷贝到js下
  19. 5) 引入顺序  
  20.    a）react.development.js
  21.    b）react－dom.development.js
  22.    c） babel.js
  24. babel:es6转为es5,解析jsx(使得可以在js中写html标签)-混写
  25. 则var a = <h2>hello world</h2>被解析--相当于react自动执行了React.createElement原理;  不使用jsx,第二个参数是属性: var b = React.createElement("h2", null, "hello world");
  27. jsx是一种语法糖,是javascript扩展的意思(不是必须的,可以提高开发效率),相当于js+xml;原理是自动执行了React.createElement
  29. <h1>注意:jsx的规则</h1>
  30. <b>react插值表达式:{}; 注意:可以以字符串形式解析数组,不能直接渲染对象,但是可以渲染对象的属性,会报出错误:Objects are not valid as a React child; 只能写表达式(包括三目),不能写if else,for,如果要写就写进函数里面</b>
  32. <b>
  33. jsx中class改为className,因为class是关键字
  34. jsx中事件的首字母要大写 onXxxx 形式,如onClick={()=>{..}};但是keyup事件要写成onKeyUp
  35. jsx中的style是在插值表达式中写一个样式对象
  36. lable标签的for需改成htmlFor,他的是与其他表单的id一致时,点击label可以使表单元素处于选中状态(多指input框)</b>
  38. <script type="text/babel">
  39. // 虚拟DOM通过render成真实DOM
  40. var a = <p className="color" onClick={() => { alert('子元素') }}>子元素</p>;
  41. //原理就是React.createElement
  42. var b = React.createElement("h2", null, "hello world");
  43. ReactDOM.render(<h1>hello world-{name}{arr}
  44.     {a}
  45. </h1>,document.getElementById("box"));
  46. </script>

Ⅱ、脚手架环境(基于webpack)

四种脚手架

create-react-app dva、umi(更难,包含了类似了vuex的功能,且自动配路由) 、react-app-rewired

react 底层支撑

react react-dom react-rotuer-dom antd antd-mobile redux flux react-redux immutable.js
redux-thunk redux-promise redux-saga ES6&ES7…

安装(应用第一种cli)

1. react官方脚手架create-react-app的使用
  1. [create-react-app地址](https://github.com/facebook/create-react-app)
  1. 全局安装脚手架一次 cnpm install -g create-react-app
    创建项目 create-react-app myapp
    进入项目并启动 npm start
  2. npx create-react-app my-app
    npx 命令，先检查局部中有没有create-react-app, 如果有， 跟上面一样创建和启动项
    目
    如果没有，再检查全局下有没有这个命令， 如果有， 跟上面一样创建和启动项目
    如果都没有，自动局部安装 create-react-app ，然后跟上面一样创建和启动项目-仅代表租用了一次

注意: 如果没有全局安装脚手架,npx安装是最新版本。而全局安装后会根据脚手架版本来,不会自动更新。

2. 创建工程

脚手架安装,配置都是默认的。想要修改可选择脚本-弹射eject

  1. 全局安装脚手架: cnpm i create-react-app -g
  2.   **若不想全局安装,可使用npx:npx create-react-app 'your-app'(npx是一个工具,徐安装,保证在不安装脚手架时建工程)
  4. create-react-app --version (3.3.1)
  5. 全局安装之后:create-react-app your-app(推荐用yarn)  cd到需要安装项目的路径
  6. cd your-app
  7. yarn start / npm run start 启动项目
  8. npm run build / yarn build 项目打包
  9. yarn test 测试
  11. 查看package.json发现脚本是react-scripts执行的,去node_modules/react-scripts修改配置文件没有意义,因为node_modules不能改,改了重新建辉丢失配置。所以弹射来了↓↓↓
  12. yarn eject 弹射隐藏文件显示在根目录(弹出来藏不回去,不可撤销); 弹射过程中(会下插件帮助弹射)若出错,则直接删去node_modules,再反向安装依赖,若启动项目成功,则说明弹射成功!
  14. 1. 安装过程中先安装的是:
  15. react: react的顶级库(核心库)
  16. react-dom: 运行环境不同(app端的react-native和web上就使用react-dom)
  17. react-scripts 针对项目的命令管理(包含运行和打包react应用程序的所有脚本和配置) -- 安装最耗时的
  18. cra-template
  19. 2. 安装失败解决办法
  20.   - 切换为npm镜像为淘宝镜像
  21.   - 使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到
  22. 国内
  23.   - 如果还没有办法解决，请删除node_modules及package-lock.json
  24. 然后重新执行`npm install命令`
  25.   注释 - node_modules删除ramrif或者按住shift再删除直接从硬盘删除,而不是放入回收站。package-lock.json或yarn.lock是给版本上锁,有时候这个文件也会出错,删掉再安装
  26.   - 再不能解决就删除node_ modules 及package-lock.json的同时清除npm缓存`npm cache clean --force`之后再执行npm i命令
  28. yarn比npm的好处:npm只要一个包安装失败,会一直卡在哪儿,而yarn不会

工程的结构之

1.项目结构:
  1. public 放置静态资源,不会被打包
    index.html 是页面 id=”root”
  2. src
    index.js 是入口文件,把根组件 App 挂载到”#root”节点上(serviceWorker -> PWA:渐进式的网页应用程序,使得离线状态下加载更快) - 如果不要 PWA 也可以
    src新建一个components文件夹专门放组件,再新建每个文件就是一个组件,这个组件包含他的js和css

注意: 图片的引入 import 变量名 from “图片路径path” 使用02-react-cli - 图1 或者直接02-react-cli - 图2 但是:public下的图片不用写require,直接写路径,且可省略public—静态目录public目录下的图片 02-react-cli - 图3