关于前端:React入门随笔

React 不是一个框架，是一个用于构建用户界面的 JS 库，实现单页面利用。React 用于在前端构建用户界面（UI）。React 是 MVC 应用程序的视图层（模型视图控制器）。

多页面利用：页面跳转时跳转的都是残缺的 html 页面
单页面利用：只有一个 html 页面，所有内容都在这个页面中展现，通过 ’ 路由 ’ 来加载不同内容。全副是通过 js 来管制显示的。长处：用户体验比拟好，加载比拟晦涩。毛病：不利于 seo(网站优化，影响搜寻排名)，解决办法 ssr(服务端渲染)。

起步装置

先决条件：全局装置了 Node.js 和 npm。npm i -g yarn(yarn 下载速度比 npm 快)
 办法 1：npx create-react-app my-app(我的项目初始化)

1. npx : npm 中的一个性能，npx 的执行分 3 步，第一步：下载脚手架。第二步：应用脚手架装置我的项目。第三步：下载好我的项目之后删除脚手架
2. 脚手架：曾经写好的配置相当于一个汇合
3. 另外一种装置办法：npm i -g create-react-app create-react-app my-app 先下载好脚手架，再通过脚手架下载我的项目，毛病：版本不自动更新

   Create React App 解读：该环境事后配置了构建 React 利用所需的所有。它将创立一个实时开发服务器，应用 Webpack 主动编译 React，JSX 和 ES6，主动前缀 CSS 文件，并应用 ESLint 测试和正告代码中的谬误。

初始化我的项目目录构造解读

node_modules : 我的项目依赖包
    public : 动态文件（模板 -index.html）src : 编写前台代码文件夹
           index.js：入口文件
           App.js：入口文件中渲染的页面
           .test.js：测试文件，个别不须要管
           serviceWorker.js : PWA 的配置文件
           .gitignore 文件：git 上传时的疏忽配置文件
           package.json：记录装置信息
         "scripts": {
                   "start": "react-scripts start",  // 启动开发阶段服务器
                   "build": "react-scripts build",  // 打包
                   "test": "react-scripts test",  // 运行测试
                   "eject": "react-scripts eject" // 显示暗藏的配置
          }
           运行 npm run eject 时，提醒这个命令是不可逆的，运行后会多出 config 文件夹和 scripts 文件夹，config 里边是 webpack 的配置；scripts 里边是启动命令的配置，个别不执行这个命令

JSX 语法：

1. 在 js 中能够间接写 html
                  HTML 局部：间接写 html 标签
                  JS 局部 : 写在 { } 内
               ·babel 会把 jsx 转成 React.createElement()
               ·React.createElement()办法是创立 react 元素 (虚构 DOM) 的办法
               ·ReactDom.render()的第一个参数，须要的就是 react 元素
             2.JSX 的特点
       {}大括号中写的是 js 表达式，【注】大括号中不能间接渲染对象，能渲染数组(不能有一般对象)
        1. 类名：className
        <div className='' ></div>
        <label htmlfor='' ></label>
        2. 增加行内款式：<div id={uid} style={{color:'red',fontsize:'14px'}} ></div>
             3. react 元素时不可变的，如果须要更新页面显示，就须要创立新的 react 元素
             4.JSX 是一个表达式, 能够在 map 循环的代码块中应用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX。在 JSX 当中，是不能应用 if else 的，不过能够应用三元运算表达式
                 .map(function(ele,index){return 返回值})
         数组的一个遍历办法,ele 是数组元素项，index 是下标，return 后是返回值
             5. JSX 属性
        1. 应用引号来定义以字符串为值的属性
            const element = <div tabIndex="0"></div>;
         2. 应用大括号来定义以 JavaScript 表达式为值的属性
            const element = <img src={user.avatarUrl}></img>;
         3.style 款式应用 JSX，写法如下：<div style={{color:"red" ,fontSize:"30px"}}></div>

元素渲染

React DOM 会负责更新 DOM 来与 React 元素保持一致

    语法：ReactDom.render(element,parentNode)
    阐明：

1. 参数 1：element 为要显示的元素。能够是双标签模式的，也能够是单标签模式的，如果是单标签必须有完结符号

2. 参数 2：parentNode 为元素要显示在页面的哪个标签中。3. 渲染办法个别一个我的项目中只有一个。其余页面通过组件引入或者路由拜访。4. 更新已渲染的元素:React 元素是不可变对象。一旦被创立，你就无奈更改它的子元素或者属性。react 元素写法：1. 间接应用 jsx 语法：`<div>{变量名}</div>`
      2. 应用 React.createElement()
      3. 应用组件 `<App/>`

组件

1. 概念：从概念上相似于 JavaScript 函数。它承受任意的入参（即“props”），并返回用于形容页面展现内容的 React 元素。组件容许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

2. 创立形式有两种：

   1. 函数式组件: 函数式组件在不应用 hook 语法时，性能特地弱，有 hook 语法后，要替换类型式组件

function App(props){return (<div>{props.name}</div>)
        }

2. 类型式组件：后期应用类组件，会学习类组件中的 state, 生命周期函数
   类组件中想要获取 props 须要用 this.props 来获取
   

class App extends React.Component{render(){
               return (<div></div>)
          }
    }

【留神】不论函数式组件还是类型式组件，必须先引入 React，否则报错；return 返回的 jsx 只能有一个顶层标签

类型式组件

1. 创立类型式组件

 import React,{Component} from 'react'
          
           class Home extends React.Compoent{return (<div></div>)
        }

阐明：1：组件名称首字母要求大写

   2：须要继承 React.Component 这个类
   3：必须有一个 render 函数，render 必须 return,return 后写的是 jsx 语法

1. 导出组件

export {Home}
        export default Home

1. 导入组件

import {Home} from 'path'---->Home 名字是自定义
import Home from 'path'

1. 应用组件
   当成标签应用，单 / 双标签都能够
   <Home/> || <Home></Home>

组件复用

把页面中的某一块 UI 拆分进来，做成一个组件，在应用的地位间接屡次调用组件即可

props：只读属性，不能改(父传子)

1. 当 React 元素为用户自定义组件时，他会将 JSX 所接管的属性转换为单个对象传递给组件，这个对象被称之为 ’props’
2. 调用组件时能够通过定义属性的模式来传递数据 <Item data='data' arr={[1,2,3]} />
3. 组件应用传递的数据时，通过 props 对象获取调用数组时传入的数据【注】传递数据时，多个组件第哦啊用定义的属性名要统一
4. 能够应用 … 扩大运算符来开展数据(数组)，也能够遍历时传递数据

class Item extends Component{console.log(this.props) // {data:'string',arr:[1,2,3,4]}
     }

JSX 中的循环

1. 不能应用 for 循环
2. 能够应用 map 办法遍历对象或数组

arr/obj.map(function(item,index){return item})

state：定义组件外部本人应用的数据

1. 在类组件中有两种定义形式
   第一种：在 constructor 办法中定义

constructor(){super();
            this.state = {count : 1}
        }

第二种：间接在组件中定义

state = {count : 1}

1. 应用 state 数据 : this.state.xx
2. 批改 state 数据 :
   办法 1 对象模式的 :

this.setState({count : this.state.count + 1})

办法 2 函数模式的：

this.setState((state)=>{
        return {count : state.count + 1}
    })

1. this.setState()办法有批量更新性能(意思就是执行最初一次的)

this.setState({count : this.state.count + 1})

1. this.setState()办法可能是异步的。当 setState 间接放在事件的宏工作中执行时是异步的；当 setState 又被放在别的宏工作中或者其余微工作中时又是同步的(此时被两个以上宏工作包裹 || 被微工作包裹)

this.setState({},()=>{})
setState 的函数模式：参数 state 指的永远是最新的数据，是上一次操作完 state 的后果

this.setState((state)=>{
             return {count : state.count + 1}
        })

生命周期函数

生命周期函数也被称为钩子函数，在组建运行过程中在某些特定条件下主动执行的函数。重点：componentDidMount , componentDidUpdate , shouldComponentUpdate , componentWillUnmount
··· componentWillMount 组件行将渲染(可能会网络申请，然而不倡议)
··· componentDIdMount 组件渲染实现(网络申请，全局事件绑定)
··· shouldComponentUpdate 是否容许组件更新(优化应用)
··· componentWillUpdate 组件行将更新(个别不做任何解决)
··· componentDidUpdate 组件更新实现(新的网络申请)
··· compoentWiiReceiveProps 组件接管新的 props(个别不做任何解决)
··· componentWillUnmount 组件行将卸载(把全局绑定的事件，网络申请等有副作用的全副革除)

事件零碎

react 中本人从新定义了事件零碎，react 绑定事件不须要获取到 DOM 元素，而是把事件绑定定义再虚构 DOM 上

语法：<div on 事件名 = {函数}>《/div> 事件名要求采纳驼峰命名法

函数编写模式：

1. 间接定义一个箭头函数
       2. 能够定义函数
    如果是类型式组件，须要应用 this.clickme,clickme 函数定义在类中
    class App extends React.Component{clickme()
             render(){return <div onClick={this.clickme}></div>
        }
    }
        3. this 指向问题
    在 react 中，自定义事件中 this 默认是指向 undefined 的
    如果想让 this 指向以后组件有以下几种办法：1. 在 constructor 构造方法中通过 bind 绑定 this
          2. 应用 bind, 扭转 this 指向(能够传参)
          3. 应用箭头函数(内存开销最大)
    如果当函数调用时没有传参，倡议在 constructor 办法中绑定，如果函数调用时须要传参，间接应用 bind 绑定更多一些
    
    

事件对象

事件对象不须要传递，间接调用就行，在事件对象办法函数形参的最初一个地位

   获取坐标信息
   阻止默认事件
   阻止冒泡
   获取事件触发者

表单

form 标签 <form action=’http://xxx’ method=’get | post’></form>
ajax: 不刷新页面，实现部分刷新，form 很少用

表单：收集用户输出信息

  第一种 : 受控组件(表单数据的显示和更改都是由 react 的 state 管制的，使 react 的 state 成为 '惟一数据源')
  第二种：非受控组件(容许用户获取到原生 DOM，本人来操作数据)

。。。reart–》es6 函数扩大