React.js教程：从JSX到Redux的全面解析

文章目录

- 介绍
- react脚手架
- jsx语法和react组件
- - jsx的基本语法
  - jsx的行内样式
  - jsx的类名className
  - if条件渲染
  - map循环渲染
  - 创建组件方法
- 可视区渲染 (React- virtualized)
- React-redux

介绍

javascript库，起源于Facebook的内部项目，类似于vue
特点
- 声明式
- 组件化
安装
- npm i react react-dom -S
  - react包：是核心，提供创建元素，组件等功能
  - react-dom包：提供DOM相关功能

react脚手架

初始化项目：npx create-react-app 项目名称
- npx 不是 npm npx 去找到对应的脚手架安装执行所以我们不需要先安装
启动项目：npm start

脚手架中使用react的步骤

导入react和react-dom两个包

import React from 'react' 
import ReactDom from 'react-dom'

创建元素

// React.createElement('标签名', {属性名: 属性值}, 标签内容) 
let element = React.createElement('h1', {id: 'tt'}, '春风十里不如你')

渲染到页面

ReactDom.render(创建的元素, 页面上的dom元素) 
ReactDom.render(element, document.getElementById('root'))

jsx语法和react组件

jsx的基本语法

import React form 'react'
import ReactDom from 'react-dom'
// {}可以写变量、算数、三元表达式 不能写for、if这些语句
let name = '呼呼'
let age = 18
let div = <div><h1>我是div里面的h1标签</h1><div>{name}</div><h2>{1 + 1}</h2><h3>{age >= 18 ? '已成年' : '未成年'}</h3>
</div>
console.log(name)
ReactDom.render(div, document.getElementById('root'))

jsx的行内样式

import React form 'react'
import ReactDom from 'react-dom'/*** 1.第一个 {} 代表的是js* 2.第二个 {} 代表的是对象* 3.style = {}*/let div = <div style={{ color: 'red', background: 'pink' }}>我是div标签</div>ReactDom.render(div, document.getElementById('root'))

jsx的类名className

import React form 'react'
import ReactDom from 'react-dom'
import './style/index.css'
let div = <div className='box'>我是一个小哈哈</div>
ReactDom.render(div, document.getElementById('root'))

if条件渲染

import React form 'react'
import ReactDom from 'react-dom'
// react中的if条件渲染：就是原生js的if直接判断
let isLoading = false
let div = ''
if (isLoading) {div = <div><h3>加载中...</h3></div>
} else {div = <div><h3>加载完成</h3></div>
}
ReactDom.render(div, document.getElementById('root'))

map循环渲染

import React form 'react'
import ReactDom from 'react-dom'let arr = [{ id: 1, name: '三国演义' },{ id: 2, name: '水浒传' },{ id: 3, name: '西游记' },{ id: 4, name: '红楼梦' }
]
let ul = <ul>{arr.map(item => <li key={item.id}>{item.name}</li>)}</ul>
ReactDom.render(ul, document.getElementById('root'))

创建组件方法

函数组件
1.1 首字母必须大写
1.2 必须return，如果不想渲染东西，就return null
1.3 使用的时候直接写组件标签就可以

import React form 'react'
import ReactDom from 'react-dom'function Hender() {// 这里必须returnreturn <div>我是函数组件 <h1>创建组件</h1></div>
}
ReactDom.render(<Hender></Hender>, document.getElementById('root'))

class类组件
2.1 首字母必须大写
2.2 class组件名 extends React.Component{}
2.3 里面必须写render，render里面必须return

import React form 'react'
import ReactDom from 'react-dom'class Hender extends React.Component() {render() {return <div>class类组件 <h1>h3标签</h1></div>}
}
ReactDom.render(<Hender></Hender>, document.getElementById('root'))

可视区渲染 (React- virtualized)

只渲染看见的几条和前后几条，不管数据有多少，性能很高
原理：只渲染页面可视区域的列表项，非可视区域的数据完全不渲染 (预加载前面几项和后面几项)，在滚动列表是动态更新列表项

React-redux

概念
- 在react-redux写的是数据，都是全局数据，所有组件都可以用
- 是react里面的全局数据状态管理
react-redux与redux的关系
- redux：全局数据管理，在vue、jq、react都可以用，比较繁琐
- react-redux：专门在react使用，基于redux的封装，配套
使用步骤
1. 下载react-redux redux包：npm i react-redux redux -S
2. index.js文件导入Provider、createStore
  import { Provider } from 'react-redux'
  import { createStore } from 'redux'
3. 使用createStore创建全局数据
  3.1 createStore(reducer函数, 全局state数据对象)
4. 使用Provider包裹App根组件并传入store