做网站卖机器怎么弄,工程公司名称大全集最新免费,织梦 别人 网站 模板,沉默是金吉他谱文章目录 介绍react脚手架jsx语法和react组件jsx的基本语法jsx的行内样式jsx的类名classNameif条件渲染map循环渲染创建组件方法 可视区渲染 (React- virtualized)React-redux 介绍
javascript库#xff0c;起源于Facebook的内部项目#xff0c;类似于vue特点 声明式组件化 … 文章目录 介绍react脚手架jsx语法和react组件jsx的基本语法jsx的行内样式jsx的类名classNameif条件渲染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 divh1我是div里面的h1标签/h1div{name}/divh2{1 1}/h2h3{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标签/divReactDom.render(div, document.getElementById(root))jsx的类名className
import React form react
import ReactDom from react-dom
import ./style/index.css
let div div classNamebox我是一个小哈哈/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 divh3加载中.../h3/div
} else {div divh3加载完成/h3/div
}
ReactDom.render(div, document.getElementById(root))map循环渲染
import React form react
import ReactDom from react-domlet 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-domfunction Hender() {// 这里必须returnreturn div我是函数组件 h1创建组件/h1/div
}
ReactDom.render(Hender/Hender, document.getElementById(root))class类组件 2.1 首字母必须大写 2.2 class组件名 extends React.Component{} 2.3 里面必须写renderrender里面必须returnimport React form react
import ReactDom from react-domclass Hender extends React.Component() {render() {return divclass类组件 h1h3标签/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的封装配套 使用步骤 下载react-redux redux包npm i react-redux redux -Sindex.js文件导入Provider、createStore import { Provider } from react-redux import { createStore } from redux使用createStore创建全局数据 3.1 createStore(reducer函数, 全局state数据对象)使用Provider包裹App根组件并传入store
