[JavaScript知识库]React学习笔记01

React简介

React是源于Facebook内部项目的一个用于构建用户界面的JavaScript库。

React的特点：

声明式：以HTML的形式描述UI结构

基于组件：以组件为基础构建页面，组件表示页面中的一部分内容

通用性：React具有可以开发Web端，移动端，VR等应用的库

React的使用

安装：npm i react react-dom? ? ? ? 安装react，react-dom两个包

安装脚手架：npx create-react-app 项目名字? ? ? ? 应用脚手架创建一个项目（无需配置，开箱即用）

启动：npm start? ? ? ? 注意在项目根目录下执行该命令

引入包：

import React from ‘react’
import ReactDOM from ‘react-dom’

渲染元素：ReactDom.render（待渲染的元素，挂载点）

JSX

JSX简介

JSX即JavaScript XML以HTML的形式创建元素，相较使用React.createElement 更为简洁方便，更能体现React声明式的特性。

例：

const sam = <h1> Hello </h1>

注：JSX非ECMAScript语法，需要使用babel编译处理后才能在浏览器下使用，脚手架中已有默认配置。

JSX中与HTML区别之处,及其部分特性

属性名采用驼峰命名：class 变为 className

无子节点时可直接用 /> 结束元素：<h1 />

JSX中调用JS的表达式时用 {} 将JS表达式包裹：

const sam1 = "Guten Tag"
const sam = (
    <h1>
        {sam1}
    </h1>
)

列表渲染，以map的形式遍历数组：

const sam = [ {name: a, id: 1}, {name: b, id: 2} ]
const list = (
    <ul>
        {sam.map ( (item) => <li key = item.id> {item.name} </li> ) } 
    </ul>
)

注：不要轻易使用数组索引作为key值，应选用不变且唯一的值。因为如使用数组索引，当删去数组中元素后索引自动补位，程序将需匹配至最后一位才能发现props的变化，并进行渲染。而当选用其他值时可避免此类情况，减少资源浪费，提高性能。

value key
a     0
b     1
c     2

//删除元素后
value key
b     0
c     1

JSX的样式处理

行内样式

<h1 style = { {color = 'green', backgroundColor = 'red'} } >
</h1>

引入外部css

import './index.css'
<h1 className = "sam">
</h1>

杂记

箭头表达式：（形参）=> {函数体}? ? ? ? 以这种形式构建函数

$符：$('a') 等效于 document.getElementById(' a ')

map函数：map（function（当前值，索引，数组对象），this指针值）? ? ? ? 遍历数组并返回使用function处理后的值。

参考资料

https://www.bilibili.com/video/BV14y4y1g7M4?from=search&seid=10562211735321534009