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函数扩展