React学习笔记1

我不是女神ヾ 2022-11-20 08:10 128阅读 0赞

# 什么是 React ? #

React 是一个用于构建用户界面的 javascript 库。

# react的特点： #

1、`声明式设计`−React采用声明式，可以轻松描述应用。（开发者只需要声明显示内容，react就会自动完成）  
2、`高效`−React通过对DOM的模拟，最大限度地减少与DOM的交互。  
3、`灵活`−React可以与已知的库或框架很好地配合。  
4、`组件`− 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。（把页面的功能拆分成小模块–每个小模块就是组件）  
5、`单向数据流`–　React是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点

# 虚拟dom #

`虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能`

react 在内存中生成维护一个跟真实DOM一样的虚拟DOM 树，每当数据发生变化，会再生成一个新得DOM，react 会把新虚拟DOM 跟原虚拟DOM 进行比对，找出两个DOM 不同的地方diff ，然后把diff放到队列里面，然后批量更新diff 到真实DOM 上。

# diff算法： #

计算出虚拟DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。

# 什么是调和： #

将Virtual(虚拟)DOM树转换成actual(真实)DOM树的最少操作的过程称为调和

# 组件的基本概念与优势： #

1、React的核心就是组件：组件的设计目的是提高代码复用率，降低测试难度和代码的复杂程度。  
2、提高代码复用率：组件将数据和逻辑进行封装。  
3、降低测试难度：组件高内聚低耦合（各个元素高集成度低关联性），很容易对单个组件进行测试。  
4、代码的复杂程度：直观的语法，可以极大提高可读性。

# 组件化编程思想： #

灵活的组件化设计思想，可以让你的页面功能更具复用性。同时低耦合度的组件可以让功能之间的影响降到最低！

# React 依赖包下载： #

npm install react react-dom babel-standalone --save  
`注意：react需要引入三个包：（必须按照如下的顺序引入）`

`react.js`文件是创建React元素和组件的核心文件，  
`react-dom.js`文件用来把React组件渲染为DOM，此文件依赖于react.js文件，需在其后被引入。  
`Babel`的主要用途是将ES6转成ES5 同时可以把JSX 语法转换新标准的JavaScript代码让现今浏览器兼容的代码

# React --根DOM节点： #

页面中需要有一个div容器，容器中的内容都会被React Dom所管理。  
这个容器叫做根DOM`节点`  
注意：通常React 开发应用时一般只会定义`一个根节点`。

# React --JSX： #

1、`什么是JSX`：JSX=javascript xml就是Javascript和XML结合的一种格式。是JavaScript 的语法扩展，只要你把THML代码写在js里，那就是JSX  
。  
2、 React推荐在 React 中使用 JSX 来描述用户界面。`当遇到（JSX就当HTML解析，遇到{就当JavaScript解析。`

3、在实际开发中，JSX 在产品\*\*\*\*打包阶段\*\*\*\*都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。官方定义是：类 XML 语法的 ECMAScript 扩展。

4、`JSX的进一步理解（为什么要搞个JSX）`：任何软件项目都有界面和逻辑，而传统的CS开发里，一门语言完成了界面和数据，但是在BS（web）开发里，要完成界面和数据，需要三门语言：HTML，CSS，JS，而JSX完美的解决了这个问题，在JSX中把原生的JS，HTML都包含了。

5、外置jsx 如果想使用外置的jsx 那么必须在引用的时候加上 type=“text/babel”  
`下面这个js-css-html这个插件需要关掉，不然会报错`  
![在这里插入图片描述][20201027161230467.png_pic_center]  
通过Babel，JSX会把转换为使用React.createElement()类的ES5的语句  
注多行代码必须有根DOM节点包这  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
`render的作用是将虚拟DOM转换成真是DOM`

### JSX中使用模板语法： ###

可以任意地在 JSX 当中使用 JavaScript表达式，在 JSX 当中的表达式要包含在大括号\{\}里。

## `注意`在写html的时候必须严格尊w3c的规范来完成html的编写（不然会报错） ##

例如标签必须有开始和结尾
      单标签在标签内加上"/"

## 属性插值 ##

<div id="box"></div>
    
        <script type="text/babel">
        let src="http://www.baidu.com/"
        let com=(
            <a href={src}>点击去百度</a>
        )
            ReactDOM.render(com,document.getElementById("box"))
        </script>

## jsx设置样式 ##

1、使用类名的方式来进行设置 但是注意 原本的`class 必须必须必须改成className`来进行类名的设置 因为class是es6的关键字

2、行内样式的设置：  
在设置行内样式的时候传递进来的必须是一个对象 而且如果样式有多个单词的话需要把 - 替换成大写驼峰`style{ {color:"red",backgroundColor:"pink",border:"2px solid black",width:200,textAlign:"center"}}`我是使用行内样式修改的

<body>
            <div id=box></div>
            <script type=text/babel>
                let text="哈哈哈"
                let style={
                    color:"red",
                    backgroundColor:"pink",
                    border:"2px solid black",
                    width:200,
                    textAlign:"center"
                }
                let com=(
                     <h1 className="demo" style={style}>{text}</h1>
                )
                ReactDOM.render(com,document.getElementById("box"))
            </script>
      </body>

# `属性小扩展:` #

1、html的value属性要写成：defaultValue  
2、html的checked属性要写成：defaultChecked  
3、style 里面写对象  
4、class 写className  
5、label标签中的from要写成：htmlFor

# 四种基本列表 --循环遍历 #

#### React 列表渲染 ####

`1、map方式的组件`

<body>
          <div id=box></div>
          <script type=text/babel>
             let arr=[
                 "AA","BB","CCC","DD","FF"
             ]
             let newHtml=arr.map((v,i)=>{
                 return (
                     <li>{v}</li>
                 )
             })
             ReactDOM.render(newHtml,document.getElementById("box"))
          </script>
    </body>

`2、函数方式的组件`

<body>
          <div id=box></div>
          <script type=text/babel>
             let arr=[
                 "AA","BB","CCC","DD","FF"
             ]
             function fun() {
                return arr.map((v,i)=>{
                 return (
                    <h1>{v}</h1>
                 )
             })
             }
             let newHtml=(
                 <h1>{fun()}</h1>
             )
             ReactDOM.render(newHtml,document.getElementById("box"))
          </script>
    </body>

`3、数组的方式`

<body>
            <div id=box></div>
            <script type="text/babel">
              let arr=[
                     "AA","BB","CCC","DD","FF"
                 ]
                 let newArr=[]
                 for(let i=0;i<arr.length;i++){
                    newArr.push(<li onClick={fun} key={i}>{arr[i]}</li>)
                 }
                 let newHtml=(
                     <ul>{newArr}</ul>
                 )
                 function fun(){
                     console.log(newArr)
                 }
                 ReactDOM.render(newHtml,document.getElementById("box"))
                 console.log(newArr)
            </script>
        </body>

`4、from循环的组件`

<body>
        <div id=box></div>
        <script type="text/babel">
          let arr=[
                 "AA","BB","CCC","DD","FF"
             ]
             let newArr=[]
             for(let i=0;i<arr.length;i++){
                newArr.push(<li>{arr[i]}</li>)
             }
             let newHtml=(
                 <ul>{newArr}</ul>
             )
             ReactDOM.render(newHtml,document.getElementById("box"))
             console.log(newArr)
        </script>
    </body>

## 点击变色 ##

[20201027161230467.png_pic_center]: /images/20221120/d6548cd3634a4b67bdd0cc79a42a8ae6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/d7864708fc1046948a0ef253d07d6ed6.png