Bootstrap

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
;