React的知识点的整理(一)

最近闲来无事,整理下React的一些知识

React 是什么

React是用于构建用户界面的 JavaScript 库。React全家桶（react，react-dom，react-router，redux）是框架。

三大框架背景

(1)react起源于meta(原Facebook)的内部项目

(2)vue是尤雨溪的个人作品

(3)angular是goole公司产品

React 特点

（1）声明式：用类似html的语法来定义页面。react中通过数据驱动视图的变化，当数据发生改变,react能够高效地更新并渲染DOM。

（2）组件化：创建拥有各自状态的组件，再通过复用、组合构成更加复杂的 UI。react的组件逻辑是使用 JavaScript 编写而非模版，因此可以轻松传递数据，并使状态与 DOM 分离。

（3）一次学习，随处编写：react可以用于多场景开发，使用全球第一。

React脚手架-从零开始创建项目

（1）创建方式一：

1.先全局安装脚手架工具包npm i -g create-react-app

2.用脚手架工具来创建项目create-react-app your-project-name

（2）创建方式二：

1.直接使用npx来创建项目npx create-react-app your-project-name

（ npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用 ）

解释：

npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称
your-project-name 表示项目名称，可以修改
启动项目
运行命令npm start

工作原理

webpack会实时自动打包，并把代码嵌入到public/index.html文件中，并执行。

第一份react程序

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// 创建元素，h1是标签，{}是属性可以为空，最后是标签内容（即子元素，可以多个）
const title = React.createElement('h1', {id:'box'}, 'hello react')

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

react包 提供必要功能来定义react组件。

react-dom 包用来将react组件渲染到dom中。

JSX介绍-基本使用

JSX是JavaScript XML的缩写，React用它来创建 UI（HTML）结构。（注：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法，实际还是使用 React.createElement（））

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// jsx创建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

优势：

采用类似于 HTML 的语法，降低了学习成本，会 HTML 就会 JSX
充分利用 JS 自身的能力来创建 HTML 结构。比如，利用 JS 数组的 map 方法创建列表结构

JSX的注意事项

1.JSX必须要有一个根节点
虚拟更节点的两种形式：

  （1）<> xxx </>

  （2）<React.Fragment> xxx </React.Fragment>

2.属性名不能用js中的关键字
例如：

 （1） class --> className

 （2）for -->htmlFor

3.单标签要闭合

   （1）<input> --> <input />

4.换行建议使用( )包裹

const content = (
	<div>
  	<h1>xxx</h1>
  </div>
)

5.老版本(16.8)先引入react才能使用JSX

JSX-嵌入表达式

嵌入表达式的格式

{ JS 表达式 } 让 JSX 解析器知道它需要将它们之间的内容解释为 JavaScript代码 而不是字符串.

作用：执行{ }可以写表达式（有值或能够计算出值）内部的代码，并输出结果。

注意： { }可以写表达式（有值或能够计算出值）、其他的jsx表达式、注释；不可以写对象、js语句（if 语句/ switch-case 语句/ 变量声明语句）

import ReactDOM from 'react-dom'

const num = Math.random()
const title = (<div>
               		随机值：{ num }
               </div>)

ReactDOM.render(title, document.querySelector('#root'))

嵌入表达式的位置
（1）属性值

const logo = 'https://create-react-app.dev/img/logo.svg'
<img width="80" src={logo} />

（2）内容

const name = '示例'
<div>{name}</div>js

JSX-条件渲染

（1）用三元表达式

const flag = 0
const content = (<div>{flag ? '达成' : '没有达成'}</div>)

（2）用逻辑与

const isLogin = true
const content = (<div>{ isLogin && '您登录了'}</div>)

（3）使用额外的函数（函数中也可用switch/case等）

const loadData = (isLoading) => {
  if (isLoading) {
    return <div>数据加载中，请稍后...</div> 
  } else {
    return <div>数据加载完成，此处显示加载后的数据</div>
  }
}
const content = <div>{loadData(true)}</div>

JSX-列表渲染

import ReactDOM from 'react-dom'

const skills = [
  { id: 1, name: 'html' }, 
  { id: 2, name: 'css' }, 
  { id: 3, name: 'js' }
]

const list = (
  <ul>
    {skills.map(item => <ol key={item.id}>技能{item.id}: {item.name}</ol>)}
  </ul>
)

ReactDOM.render(content, document.getElementById('root'))

列表渲染中的key

key 帮助 React 识别哪些元素改变了，比如被添加或删除，但是key在最终的HTML结构中是看不到的。一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。

性能优化：如果添加一条数据，则视图也要随之更新，而更新的逻辑是：前几条正常保留，而重新添加新增的条。

JSX-样式处理

行内样式 - style
<dom元素 style={ {css属性1：值1,css属性2：值2} }></dom元素>

解释：

（1）为啥有两个{{ }}

1.外层的{}表示 要开始写js了

2.内层的{}表示是一个对象

（2）属性名是小驼峰格式 (background-color ===> backgroundColor)

（3）属性值是字符串, 如果单位是px，可以简写数值

使用 className

（1）用className（不是class）定义类名

（2）把样式写在额外的.css文件中，然后引入.css文件