React.js教程：从JSX到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的步骤
  1. 导入react和react-dom两个包

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

  2. 创建元素

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

  3. 渲染到页面

     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 首字母必须大写
   1.2 必须return，如果不想渲染东西，就return null
   1.3 使用的时候直接写组件标签就可以

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

2. 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