名作之壁吧网站建设,大连旅顺口景点介绍,品牌推广文案,wordpress该连接后不显示代码下载
React 概述
React 是一个用于构建用户界面的javaScript库#xff0c;起源于facebook的内部项目#xff0c;后续在13年开源了出来。
特点#xff1a;
声明式——只需要描述UI看起来是什么样式#xff0c;就跟写HTML一样#xff0c;React负责渲染UI基于组件——…代码下载
React 概述
React 是一个用于构建用户界面的javaScript库起源于facebook的内部项目后续在13年开源了出来。
特点
声明式——只需要描述UI看起来是什么样式就跟写HTML一样React负责渲染UI基于组件——组件时React最重要的内容组件表示页面中的部分内容组合、复用多个组件可以实现完整的页面功能学习一次随处使用——使用React可以开发Web应用使用React可以开发移动端可以开发VR应用
React 基本使用
1、安装 React在终端执行命令 npm i react react-dom
react 包是核心提供创建元素、组件等功能react-dom 包提供 DOM 相关功能等
2、引入 react 和 react-dom 两个 js 文件 script src../node_modules/react/umd/react.development.js/scriptscript src../node_modules/react-dom/umd/react-dom.development.js/script3、创建 React 元素并渲染 React 元素到页面中
bodydiv idroot/div
/bodyscriptconst title React.createElement(h2, null, React 基本使用)ReactDOM.createRoot(document.getElementById(root)).render(title)
/scriptReact.createElement 方法说明
返回值React元素第一个参数要创建的React元素名称第二个参数该React元素的属性第三个及其以后的参数该React元素的子节点
const title React.createElement(h2, null, hello, world!, React.createElement(a, { href: https://www.baidu.cn/ }, 百度))ReactDOM.createRoot(dom).render(el) 方法说明要渲染的React元素渲染到页面中的指定位置。
React 脚手架
React脚手架意义
脚手架是开发现代Web应用的必备充分利用 WebpackBabelESLint等工具辅助项目开发零配置无需手动配置繁琐的工具即可使用关注业务而不是工具配置
React 脚手架初始化项目 1、初始化项目命令npx create-react-app my-app
npx 命令是 npm v5.2.0 引入的一条命令
目的提升包内提供的命令行工具的使用体验原来先安装脚手架包再使用这个包中提供的命令现在无需安装脚手架包就可以直接使用这个包提供的命令
2、 启动项目在项目根目录执行命令npm start
补充
脚手架创建项目的方式 1、推荐使用npx create-react-app my-app
2、npm init react-app my-app
3、如果安装了 yarn可以使用 yarn create react-app my-app
yarn 是 Facebook 发布的包管理器可以看做是 npm 的替代品功能与 npm 相同yarn 具有快速、可靠和安全的特点初始化新项目yarn init安装包 yarn add 包名称安装项目依赖项 yarn其他命令请参考yarn文档
在脚手架中使用 React
1、导入 react 和 react-dom 两个包
import React from react
import ReactDOM from react-dom/client2、调用 React.createElement() 方法创建 react 元素并使用 ReactDOM 渲染到页面中
const title React.createElement(h2, null, hello, world!)
ReactDOM.createRoot(document.getElementById(root)).render(title)JSX
通过createElement()方法创建的React元素有一些问题代码比较繁琐结构不直观无法一眼看出描述的结构不优雅。
JSX是JavaScript XML 的简写表示在JavaScript代码中写HTML格式的代码JSX优势就是声明式语法更加直观与HTML结构相同降低了学习成本提升开发效率。
使用 JSX 语法创建 react 元素并使用 ReactDOM 渲染到页面中
const hiJSX h2hello JSX!/h2
ReactDOM.createRoot(document.getElementById(hiJSX)).render(hiJSX)思考为什么在脚手架中可以使用JSX语法
JSX 不是标准的ECMAScript语法它是ECMAScript的语法拓展需要使用babel编译处理后才能在浏览器环境中使用create-react-app脚手架中已经默认有该配置无需手动配置编译JSX语法的包 bable/preset-react
使用 JSX 注意点
React元素的属性名使用驼峰命名法。特殊属性名class - className、for - htmlFor、tabindex - tabIndex 。没有子节点的React元素可以用 / 结束 。推荐使用小括号包裹 JSX 从而避免 JS 中的自动插入分号陷阱。
const note (div classNamenote /
)
ReactDOM.createRoot(document.getElementById(note)).render(note)JSX 中使用 JavaScript 表达式
JSX 嵌入 JS 表达式语法是 { JavaScript表达式 }注意事项如下
单大括号中可以使用任意的 JavaScript 表达式JSX 自身也是 JS 表达式JS 中的对象是一个例外一般只会出现在 style 属性中不能在 {} 中出现语句比如if/for 等
const sayHi () {return hello, JSX
}
const expression (divp{1}/pp{a}/pp{1 7}/pp1 大于 2 吗{1 2 ? 大于 : 小于或等于}/pp{sayHi()}/p{/* 错误示例 */}{/* p{{ a: a }}/p */}{/* p{if (true) {}}/p */}{/* p{for (var i 0; i 8; i) {}}/p */}/div
)
ReactDOM.createRoot(document.getElementById(expression)).render(expression)JSX 条件渲染
根据条件渲染特定的 JSX 结构可以使用if/else或三元运算符或逻辑与运算符来实现
var flag true
// if-else
const load () {if (flag) {return ploading……/p} else {return p加载完成/p}
}
// 三元表达式
const load1 () {return flag ? ploading……/p : p加载完成/p
}
// 逻辑与运算符
const load2 () {return flag ploading……/p
}
const condition (divif-else 条件语句{load()}三元表达式{load1()}逻辑与运算符{load2()}/div
)
ReactDOM.createRoot(document.getElementById(condition)).render(condition)JSX 列表渲染
如果要渲染一组数据应该使用数组的 map() 方法
渲染列表时应该添加 key 属性key 属性的值要保证唯一map() 遍历谁就给谁添加 key 属性尽量避免使用索引号作为 key
const data [{ id: 0, name: one }, { id: 1, name: two }, { id: 2, name: three }, { id: 3, name: four }
]
const ul (ul{data.map(item li key{item.id}{item.name}/li)}/ul
)
ReactDOM.createRoot(document.getElementById(list)).render(ul)JSX 的样式处理
1、行内样式 —— style在style里面通过对象的方式传递数据这种方式比较的麻烦不方便进行阅读而且还会导致代码比较的繁琐
const lineStyle (div style{{ backgroundColor: red, width: 100px, height: 100px}}/div
)
ReactDOM.createRoot(document.getElementById(lineStyle)).render(lineStyle)2、类名 —— className推荐先创建CSS文件编写样式代码然后在js中进行引入并设置类名即可
/* css */
.green {background-color: green;width: 100px;height: 100px;
}// js
import ./index.css
const className (div classNamegreen/div
)
ReactDOM.createRoot(document.getElementById(className)).render(className)总结React完全利用JS语言自身的能力来编写UI而不是造轮子增强HTML功能。 React 组件基础
组件是React的一等公民使用React就是在用组件。组件表示页面中的部分功能组合多个组件实现完整的页面功能。特点是可复用、独立、可组合。
React 组件的两种创建方式
1、使用函数创建组件使用 JS 的函数或箭头函数创建的组件
函数名称必须以大写字母开头函数组件必须有返回值表示该组件的结构如果返回值为 null表示不渲染任何内容
// 渲染结构的函数组件
function FuncComOne() {return (div渲染结构的函数组件/div)
}
ReactDOM.createRoot(document.getElementById(funcOne)).render(FuncComOne/FuncComOne)// 不渲染结构的函数组件
function FuncComTwo() {return null
}
ReactDOM.createRoot(document.getElementById(funcTwo)).render(FuncComTwo/FuncComTwo)// 使用箭头函数
const FuncComThree () div使用箭头函数创建渲染结构的函数组件/div
ReactDOM.createRoot(document.getElementById(funcThree)).render(FuncComThree/FuncComThree)渲染函数组件用函数名作为组件标签名组件标签可以是单标签也可以是双标签。
说明
使用JS中的函数创建的组件叫做函数组件函数组件必须有返回值组件名称必须以大写字母开头 React 据此区分 组件 和 普通的React 元素使用函数名作为组件标签名
2、使用类创建组件就是使用 ES6 的 class 创建的组件
类名称也必须以大写字母开头类组件应该继承 React.Component 父类从而可以使用父类中提供的方法或属性类组件必须提供 render() 方法render() 方法必须有返回值表示该组件的结构
// 使用类创建组件
class ClassCom extends React.Component {render() {return (div渲染结构的类组件/div)}
}
ReactDOM.createRoot(document.getElementById(classCom)).render(ClassCom/ClassCom)抽离为独立 JS 文件
组件作为一个独立的个体一般都会放到一个单独的 JS 文件中。
1、创建组件文件 SingleCom.js在 SingleCom.js 中导入React创建组件函数 或 类并导出该组件
import React from react;class SingleCom extends React.Component {render() {return (div把组件抽离为独立 JS 文件/div)}
}export default SingleCom2、在 index.js 中导入 Hello 组件并渲染组件
import SingleCom from ./SingleCom
ReactDOM.createRoot(document.getElementById(SingleCom)).render(SingleCom/SingleCom)React 事件处理
React 事件绑定语法与 DOM 事件语法相似语法是 on事件名称{事件处理程序}比如onClick{() {}} 注意React 事件采用驼峰命名法比如onMouseEnter、onFocus 事件对象可以通过事件处理程序的参数获取到事件对象。React 中的事件对象叫做合成事件对象兼容所有浏览器无需担心跨浏览器兼容性问题。
// 函数组件事件处理
function FuncComEvent() {function clickHandle(e) {e.preventDefault()console.log(点我干嘛);}return (a hrefhttps://www.baidu.cn/ onClick{clickHandle}点我/a)
}
ReactDOM.createRoot(document.getElementById(funcComEvent)).render(FuncComEvent/FuncComEvent)// 类组件事件处理
class ClassComEvent extends React.Component {clickHandle(e) {e.preventDefault()console.log(点我干嘛);}render() {return (a hrefhttps://www.baidu.cn/ onClick{this.clickHandle}点我/a)}
}
ReactDOM.createRoot(document.getElementById(classComEvent)).render(ClassComEvent/ClassComEvent)有状态组件和无状态组件
函数组件又叫做无状态组件类组件又叫做有状态组件状态state即数据
函数组件没有自己的状态只负责数据展示静类组件有自己的状态负责更新 UI让页面“动” 起来
状态state即数据是组件内部的私有数据只能在组件内部使用state 的值是对象表示一个组件中可以有多个数据
通过 this.state 来获取状态。状态是可变的通过 this.setState({ 要修改的数据 }) 来修改状态setState() 的作用是修改 state 并更新UI此思想是数据驱动视图。 注意不要直接修改 state 中的值这是错误的 JSX 中掺杂过多 JS 逻辑代码会显得非常混乱。推荐将逻辑抽离到单独的方法中保证 JSX 结构清晰。 注意事件处理程序中 this 的值为 undefined。希望 this 指向组件实例render方法中的this即为组件实例。 class StateCom extends React.Component {// 构造方法// constructor() {// super()// this.state {// count: 0// }// }// 简写不使用构造方法state {count: 0}// 事件处理程序onDecrease() {// this 为 undefinedthis.setState({ count: this.state.count -1 })}render() {// render 方法 this 为组件实例return (divp数据结果{this.state.count}/pbutton onClick{() {// 箭头函数 this 为定义时的 this 即为组件实例// 修改 statethis.setState({ count: this.state.count 1 })// 错误修改 state 的方法// this.state.count}}1/button{/* 从 JSX 中抽离事件处理程序 */}button onClick{this.onDecrease}-1/button/div)}
}
ReactDOM.createRoot(document.getElementById(stateCom)).render(StateCom/StateCom)事件绑定 this 指向
1、利用箭头函数自身不绑定this的特点render() 方法中的 this 为组件实例可以获取到 setState()。
2、利用ES5中的bind方法将事件处理程序中的this与组件实例绑定到一起。
3、利用箭头函数形式的class实例方法该语法是实验性语法但是由于babel的存在可以直接使用。
// 处理 事件中 this 指向
class EventThis extends React.Component {constructor() {super()this.state {count: 0}// 2、事件绑定 this 指向this.onIncreaceTwo this.onIncreaceTwo.bind(this)}onIncreaceOne() {this.setState({ count: this.state.count 1 })}onIncreaceTwo() {this.setState({ count: this.state.count 2 })}// 3、class 的实例方法onIncreaceThree () {this.setState({ count: this.state.count 3 })}render() {return (divp结果{this.state.count}/p{/* 1、通过箭头函数 */}button onClick{() this.onIncreaceOne()}1/buttonbutton onClick{this.onIncreaceTwo}2/buttonbutton onClick{this.onIncreaceThree}3/button/div)}
}
ReactDOM.createRoot(document.getElementById(eventThis)).render(EventThis/EventThis)推荐使用class的实例方法。 表单处理
受控组件
HTML 中的表单元素是可输入的也就是有自己的可变状态而 React 中可变状态通常保存在 state 中并且只能通过 setState() 方法来修改。React 将 state 与表单元素值value绑定到一起由 state 的值来控制表单元素的值。
受控组件就是其值受到 React 控制的表单元素处理受控组件步骤
在 state 中添加一个状态作为表单元素的value值控制表单元素值的来源给表单元素绑定 change 事件将 表单元素的值 设置为 state 的值控制表单元素值的变化
// 受控组件
class ControlCom extends React.Component {constructor() {super()this.state {title: ,content: ,city: bj,isChecked: true}}// 处理 文本框、富文本框、下拉框、复选框 的变化titleChange e this.setState({ title: e.target.value })contentChange e this.setState({ content: e.target.value })cityChange e this.setState({ city: e.target.value })isCheckedChange e this.setState({ isChecked: e.target.checked })render() {return (divinput typetext placeholder请输入标题 value{this.state.title} onChange{this.titleChange}/inputbr/textarea placeholder请输入内容 value{this.state.content} onChange{this.contentChange}/textareabr/select value{this.state.city} onChange{this.cityChange}option valuebj北京/optionoption valuesh上海/optionoption valuesz深圳/optionoption valuegz广州/option/selectbr/input typecheckbox checked{this.state.isChecked} onChange{this.isCheckedChange}/input/div)}
}
ReactDOM.createRoot(document.getElementById(controlCom)).render(ControlCom/ControlCom)受控组件多表单元素优化
个表单元素都有一个单独的事件处理程序处理太繁琐可以使用一个事件处理程序同时处理多个表单元素步骤如下
给表单元素添加name属性名称与 state 相同根据表单元素类型获取对应值在 change 事件处理程序中通过 [name] 来修改对应的state
// 受控组件
class ControlCom extends React.Component {constructor() {super()this.state {title: ,content: ,city: bj,isChecked: true}}valueChage e {const value e.target.type checkbox ? e.target.checked : e.target.valuethis.setState({ [e.target.name]: value })}render() {return (divp优化受控组件/pinput nametitle typetext placeholder请输入标题 value{this.state.title} onChange{this.valueChage}/inputbr/textarea namecontent placeholder请输入内容 value{this.state.content} onChange{this.valueChage}/textareabr/select namecity value{this.state.city} onChange{this.valueChage}option valuebj北京/optionoption valuesh上海/optionoption valuesz深圳/optionoption valuegz广州/option/selectbr/input nameisChecked typecheckbox checked{this.state.isChecked} onChange{this.valueChage}/input/div)}
}
ReactDOM.createRoot(document.getElementById(controlCom)).render(ControlCom/ControlCom)非受控组件
借助于 ref使用原生 DOM 方式来获取表单元素值ref 的作用就是获取 DOM 或组件。使用步骤
调用 React.createRef() 方法创建一个 ref 对象将创建好的 ref 对象添加到文本框中通过 ref 对象获取到文本框的值
// 非受控组件
class UncontrolCom extends React.Component {constructor() {super()// 1、调用 React.createRef() 方法创建一个 ref 对象this.textRef React.createRef()}render() {return (div{/* 2、将创建好的 ref 对象添加到文本框中 */}input typetext ref{this.textRef}/inputbutton onClick{this.getText}获取文本/button/div)}// 3、 通过 ref 对象获取到文本框的值getText () {console.log(text: , this.textRef.current.value);}
}
ReactDOM.createRoot(document.getElementById(uncontrolCom)).render(UncontrolCom/UncontrolCom)评论列表案例
class Comment extends React.Component {// 初始化状态state {count: 10,comments: [{ id: 1, name: jack, content: 沙发 },{ id: 2, name: rose, content: 板凳~ },{ id: 3, name: tom, content: 楼主好人 }],userName: ,userContent: }// 渲染评论列表renderList() {const { comments } this.stateif (comments.length 0) {return div classNameno-comment暂无评论快去评论吧/div}return comments.map(item (li key{item.id}h4评论人{item.name}/h4p评论内容{item.content}/p/li))}// 处理表单元素formHandle (e) {const { name, value } e.targetthis.setState({[name]: value})}// 添加评论addComment () {const { userName, userContent } this.stateif (userName.trim() || userContent.trim() ) {alert(请输入评论人和评论内容)return}const newComments [{id: Math.random(),name: userName,content: userContent}, ...this.state.comments]this.setState({ comments: newComments,userName: ,userContent: })}render () {const { userName, userContent } this.statereturn (div classNamecommentdivinput classNameuser typetext placeholder请输入评论人 value{userName} nameuserName onChange{this.formHandle}/inputbr /textarea classNamecontent cols30 rows10 placeholder请输入评论内容 value{userContent} nameuserContent onChange{this.formHandle}/textareabr /button onClick{this.addComment}发表评论/button{this.renderList()}/div/div)}
}
ReactDOM.createRoot(document.getElementById(comment)).render(Comment/Comment)实现步骤
1、渲染评论列表
在 state 中初始化评论列表数据使用数组的map方法遍历state中的列表数据给每个被遍历的li元素添加key属性
渲染暂无评论
判断列表数据的长度是否为0如果为0则渲染暂无评论
3、获取评论信息使用受控组件方式处理表单元素
4、发表评论
给按钮绑定单击事件在事件处理程序中通过state获取评论信息将评论信息添加到state中并调用 setState() 方法更新state边界情况清空文本框边界情况非空判断
