梳理 React 知识笔记 从入门到放弃 ！框架必知的知识点

React

一、React - 简介

​ React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框 架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套 东西很好用，就在2013年5月开源了。

二、前端三大框架

框架名	出现时间	所属	一开始特色
Angular	2009年	谷歌	指令系统、双向数据绑定
React	2013年	Facebook	虚拟DOM、组件化
Vue	2015年	尤玉溪	指令系统、双向数据绑定、虚拟DOM、组件化

2、react的特点

特点：

1. 声明式设计 - React采用声明范式，可以轻松描述应用
2. 高效 - React 通过对Dom的模拟（虚拟Dom),最大限度减少与Dom的交互
3. 灵活 - React 可以与一直的库或框架很好的配合
4. JSX - JSX 是 JavaScript 的语法扩展
5. 组件 - 通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
6. 单项响应的数据流 - React 实现了单项响应的数据流，从而减少了重复代码，这也是它为什么比传统的绑定更简单。

3、React 起步

​ 3.1.全局安装 create-react-app 脚手架

$ npm i -g create-react-app

OR

$ npx create-react-app xxxx  //xxxx 是项目文件夹的名称

​ 3.2.创建项目文件夹**

$ create-react-app xxxx  //xxxx 是项目文件夹的名称

4、React 项目文件夹构成

• react-stack -------------------项目文件夹
  • node_modules -------------------模块包
  • public -------------------静态资源目录
  • src --------------------项目文件
    • App.css
    • App.js
    • App.test.js
    • index.js
    • logo.svg
    • serviceWorker.js
    • setupTests.js
  • .gitignore
  • package.json
  • README.MD

5、视图层的开发模式与函数式编程

React 并不是完整的 MVC/MVVM 框架，它专注于提供清晰、简洁的 View（视图）层解决方案。

传统dom更新：

• 真实页面对应一个Dom树。在传统页面的开发模式中，每次需要更新页面时，都需要手动操作Dom来进行更新

虚拟Dom：

• Dom 操作非常昂贵，我们都知道在前端开发中，性能消耗最大的就是DOM操作，而且这部分代码会让整体项目的代码变得难以维护。React 把真实DOM树转换成JavaScript对象树，也就是Virtual DOM

函数式编程好处：

1. 代码简洁，开发快速
2. 接近自然语言，易于理解
3. 更方便的代码管理
4. 易于"并发编程“
5. 代码的热升级

​ React把过去不断重复构建UI的过程抽象成了组件，且在给定参数的情况下约定渲染对应的UI界面。React能充分利用很多函数式方法去减少冗余代码。此外，由于它本身就是简单函数，所以易于测试。可以说，函数式编程才是React的精髓。

二、React - JSX语法

1、JSX 简介

​ JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。 编译过程由Babel 的 JSX 编译器实现。

2、JSX 注意事项

1. 组件首字母是大写 会被认为是自定义组件,首字母是小写，会被认为是 原生dom 节点
2. 组件最外层需要被一个标签包裹，不能有兄弟节点
3. return (加上小括号,可以回车)
4. 组件可以嵌套
5. 函数式写法和class 写法 (无状态组件的编写方式 )
6. 注释的写法 {这里面写注释} {//单行} {/多行/}
7. 样式
   1. class ==> className , for ==> htmlFor(label)
   2. 行内样式(facebook 推荐),注意font-size 的写法
8. 事件
   1. 箭头函数
   2. bind改变this指向
9. ref
   1. 给标签设置ref=“username”
      1. 通过这个获取this.refs.username ,ref可以获取到应用的真实dom
   2. 给组件设置ref=“username”
      1. 通过这个获取this.refs.username ,ref可以获取到应用的真实组件对象

三、React - 组件

1、函数定义组件

function Title() {
   
  return <h1>Hello</h1>;
}

or

const Title = ()=> <h1>Hello</h1>;

2、类定义组件

class Child2 extends Component {
   
  render() {
   
    return <p>我是你家老二啊</p>
  }
}

1. 不支持类写法， 函数式写法， React.creatClass

2. es6普及, class（状态，属性，生命周期） ，函数式（不支持状态、生命周期，支持属性），

3. 16.3 ==> class 生命周期写法升级

4. 16.8 之后， 函数式组件=>支持状态，“生命周期"， React Hooks ( Vue3.0 支持)

3、样式

import React, {
    Component } from 'react'
import './css/index.css' // webpack => css-loader style-loader
export default class App extends Component {
   
    render() {
   
        let myname ="kerwin"
        // style改造对象写法
        let styleobj = {
   
            background:"red",
            fontSize: "30px"
        }
        return (
            <div>
                <div style={
   styleobj}>11111-{
   10 + 20}</div>
                <div style={
   {
   background:"yellow"}}>22222-{
   10