一. 什么是react?
react是一种用于构建用户界面的javaScript库
react主要用来写html,或构建web应用
如果用mvc的角度来看,react仅仅是视图层(v),也就是只负责视图的渲染,并不是提供了完成的M和C的功能。
二. react的特点
1.声明式
只需要描述html 看起来是什么样,就跟写html一样。
react 负责渲染UI,并在数据变化是更新UI。
const jsx = <div className="app">
<h1>Hello React!动态变化数据:[count]</h1>
</div>
2.基于组件
组件是react最重要的内容。
3.学习一次,随处可用
使用react 可以开发web应用
使用react可以开发移动端原生应用(react-native)
使用react可以开发VR(虚拟现实)应用(react 360)
三. react的安装及使用
npm i react react-dom
react 包是核心,提供创建元素,组件等功能
react-dom 包提供DOM相关功能
react的使用
// 1.引入react 和 react-dom 两个js 文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<div id="f=root"></div>
<script>
// 2.创建 React 元素
// 参数一:元素名称,参数二:元素属性,参数三:元素的子节点,第三个以及以后的参数:元素的子节点
// createElement 繁琐不简洁;不直观,无法一眼看出所描述的结构;不优雅,用户体验不爽。所以建议使用 jsx
const title = React.createElement("h1",null,"Hello React",React.createElement("span",null,"我是span节点"))
// 3.渲染 React 元素到页面中
// 参数一:要渲染的React元素,参数二:挂载点(DOM对象,用于指定渲染到页面中的位置)
ReactDOM.render(title,document.getElementById("root"))
</script>
四. react脚手架的基本使用
1.初始化项目,命令:npx create-react-app my-app
2.启动项目,在项目根目录执行命令:npm start
补充说明:
1.推荐使用 npx create-react-app my-app
2.npm init react-app my-app
3. yarn create react-app my-app
yarn 是 facebook 发布的包管理器,可以看做是npm 的替代品,功能与npm 相同
yarn 具有快速,可靠和安全的特点
初始化新项目:yarn init
安装包:yarn add 包名称
安装项目依赖项:yarn
其他命令,请参考 yarn 文档
五. jsx
1, 什么是jsx
简介:
jsx 是JavaScript XML的简写,表示在Javascript 代码中写XML(HTML)格式的代码。
优势:
声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率。
jsx 是react 的核心内容
JSX 表示在js 中写 HTML结构,是React 声明式的提现。
使用 JSX 配合嵌入的 JS 表达式,条件渲染,列表渲染,可以描述任意的UI结构。
推荐使用 className 的方式给JSX 添加样式。
React 完全利用 JS 语言自身的能力来编写UI,而不是造轮子增强HTML 功能。
2, 如何使用jsx创建React元素
// 1. 使用 jsx 语法, 创建 React 元素
const title = <h1> Hello JSX </h1>
// 2. 使用 ReactDOM.render() 方法渲染 react 元素到页面中
ReactDOM.render(title,document.getElementById("root"))
· 3, 为什么 脚手架中可以使用 jsx 语法
jsx 不是标准的 ECMAScript 语法,它是 ECMAScript 的语法扩展。
需要使用 label 编译处理后,才能在浏览器环境中使用。
create-react-app 脚手架中已经默认有该配置,无需手动配置。
编译 jsx 语法的包为:@babel/preset-react
注意点:
1.react 元素的属性名使用驼峰命名法
2.特殊属性名:class -> className , (label 标签的)for -> htmlFor ,tabindex -> tabIndex
3.没有子节点的react元素可以用 /> 结束
4.推荐使用 小括号包裹 jsx ,从而避免 JS 中的自动插入分号陷阱。
const dv = (
<div> Hello JSX </div>
)
4, 在jsx中使用JavaScript 表达式
jsx 的表达式 { }
const name = 'jack'
// 1. 使用 jsx 语法, 创建 React 元素
const title = <h1> Hello { name } </h1>
// 2. 使用 ReactDOM.render() 方法渲染 react 元素到页面中
ReactDOM.render(title,document.getElementById("root"))
5, 使用jsx的条件渲染和列表渲染
条件渲染
场景:loading 效果
条件渲染:根据条件渲染特定的 JSX 结构
可以使用 if/else 或者 三元运算符 或者 逻辑与运算符 来实现
const loading = true const loadData = () => { if(loading){ return <div> 数据加载中,请稍后。。。 </div> } return <div> 数据加载完成,此处显示加载后的数据 </div> } const dv = ( <div> { loadData } </div> )
列表渲染
如果要渲染一组数据,应该使用数组的map() 方法
注意:渲染列表时应该添加key 属性,key 属性的值要保证唯一 ,尽量避免使用索引号作为key
原则:map() 遍历谁,就给谁添加 key 属性
const poem = [ {id:1,name:"静夜思"}, {id:2,name:"登鹳雀楼"} {id:3,name:"草"} ] const list = ( <ul> { poem.map(item => <li key="{item.id}">{ item.name } </li>) } </ul> )
6, 给 jsx 添加样式
(1). 行内样式-----style
<h1 style={{color:'red',backgroudColor:'skyblue'}}> JSX 样式处理 </h1>
(2).类名-----className(推荐)
<h1 className="title"> JSX 样式处理 </h1>
六. react组件的使用
1,React 组件的两种创建方式
React 组件的介绍
组件是 React 中的一等公民,使用React 就是在用组件
组件表示页面中的部分功能
组合多个组件实现完成的页面功能
组件的特点:可复用,独立,可组合
(1)使用函数创建组件
使用JS的函数(或者箭头函数)创建的组件
约定:函数名称必须以大写字母开头,React据此区分组件和普通的React元素
函数组件必须有返回值,表示该组件的结构
如果返回值为null,表示不渲染任何内容
<div id="root"></div> <script> function Hello(){ return ( <div> 这是我的第一个函数组件 </div> ) } //渲染函数组件,用函数名作为组件标签名 ReactDOM.render(<Hello />,document.getElementById("root")) </script> //无返回值时,案例如下 <script> function Hello(){ return null } </script> //箭头函数创建组件的方式 <script> const Hello = () => <div>这是我的第一个函数组件</div> //渲染函数组件,用函数名作为组件标签名 ReactDOM.render(<Hello />,document.getElementById("root")) </script>
(2)使用类创建组件
约定: 类名称必须以大写字母开头
类组件应该继承React.Component父类,从而可以使用父类中提供的方法和属性
类组件必须提供render方法
render() 方法必须有返回值,表示该组件的结构
class Hello extends React.Component{ render(){ return <div> Hello class Component </div> } } //渲染函数组件,用函数名作为组件标签名 ReactDOM.render(<Hello />,document.getElementById("root"))
(3)组件抽离为独立js文件。 以hello.js为例
创建js文件
在js文件中导入React。 import React from 'react'
创建组件(函数或者类)
在js 中导出该组件
hello.js
import React from ‘react’ class Hello extends React.Component{ render(){ return <div> hello class component </div> } } //导出组件 export default Hello
index.js
import React from ‘react’ import ReactDOM from ‘react-dom’ import Hello from './hello' ReactDOM.render(<Hello/>,document.getElementById("root"))
2,能够给react 元素绑定事件
React 事件处理
事件绑定
React 事件绑定语法与DOM事件语法相似
语法:on+事件名称 = {事件处理程序},比如:onClick={() =>{}}
注意:React事件采用驼峰命名法,比如:onMouseEnter、onFocus
在函数组建中绑定事件
事件对象
可以通过事件处理程序的参数获取到事件对象
React 中的事件对象叫做:合成事件(对象)
合成事件:兼容所有浏览器,无需担心跨浏览器兼容性问题
class App extends React.Component{ handleClick(e){ //组织浏览器的默认行为 e.preventDefault() console.log("a标签的单击事件触发了") } render(){ return( <s src="http://www.baudi.com" onClick={this.handleClick}>百度一下,你就知道</a> ) } } ReactDOM.render(<App/>,document.getElementById('root'))
有状态组件和无状态组件
3,能够使用state 和 setSate()
函数组件又叫做无状态组件,类组件又叫做有状态组件
状态(state)即数据,是组件内部的私有数据,只能在组件内部使用,state的值是对象,表示一个组件中可以有多个数据
函数组件没有自己的状态,只负责数据展示(静)
类组件有自己的状态,负责更新UI,让页面“”动“”起来
state 的基本使用
状态即数据,状态是私有的,只能在组件内部使用 通过this.state 来获取状态
setState()修改状态
状态是可变的
语法:this.setState({要修改的数据})
注意:不要直接修改state中的值,这个错误的!
setState()作用:1.修改state,2.更新UI
思想:数据驱动视图
![]()
class Hello extends React.Component{ //简化语法 state={ count:0 } render(){ return ( <div> <h1>计数器:{this.state.count}</h1> <button onClick={ this.setState({ count:this.state.count + 1 }) }>+1</button> </div> ) } }
从JSX中抽离事件处理程序
jsx 中掺杂过多的逻辑代码,会显得非常混乱
推荐:将逻辑抽离到单独的方法,保证JSX 结构清晰
原因:事件处理程序中的this 的值为 undefined
希望:this指向组件实例(render 方法中的this 即为组件实例)
4,能够处理事件中的this 指向问题
事件绑定 this 指向
改变this 指向的方法
1.箭头函数
<button onClick={() => {this.onIncrement()}}>+1</button>
2.Function.prototype.bind()
constructor(){ super() this.state = { count:0 } this.onIncrement = this.onIncrement.bind(this) }
3.class的实例方法
onIncrement = () => { this.setState({ count:this.state.count + 1 }) }
箭头函数
class Hello extends React.Component{ //简化语法 state={ count:0 } onIncrement(){ this.setState({ count:this.state.count + 1 }) } render(){ return ( <div> <h1>计数器:{this.state.count}</h1> //使用箭头函数,来解决this指向的问题 // 箭头函数中的this 指向外部环境,此处为render()方法 <button onClick={() => {this.onIncrement()}}>+1</button> </div> ) } }
Function.prototype.bind()
利用ES5中的 bind() 方法,将事件处理程序中的 this 与组件实例绑定到一起
class Hello extends React.Component{ //简化语法 constructor(){ super() this.state = { count:0 } this.onIncrement = this.onIncrement.bind(this) } onIncrement(){ this.setState({ count:this.state.count + 1 }) } render(){ return ( <div> <h1>计数器:{this.state.count}</h1> <button onClick={this.onIncrement()}>+1</button> </div> ) } }
class的实例方法
利用箭头函数形式的class 实例方法
注意:该语法是实验性语法,但是,由于babel的存在可以直接使用
class Hello extends React.Component{ //简化语法 state={ count:0 } onIncrement = () => { this.setState({ count:this.state.count + 1 }) } render(){ return ( <div> <h1>计数器:{this.state.count}</h1> <button onClick={this.onIncrement()}>+1</button> </div> ) } }
5,能够使用受控组件方式处理表单
受控组件
HTML 中表单元素是可以输入的,也就是有自己的可变状态
react 中可变状态通常保存在state 中,并且只能通过 setState()来修改
React 将 state 与表单元素值 value 绑定到一起,由state 的值来控制表单元素的值
受控组件:其值受到 React 控制的表单元素
文本框,富文本框,下拉菜单 都是通过 value 获取值,复选框 是通过 checked 来获取。
<input type="text" value={this.state.txt} /> <script> state={ txt:'' } </script>
多表单元素优化
1.给表单元素增加name属性,名称与state 相同
2.根据表单元素类型获取对应值
3.在 change 事件处理程序中通过【name】来修改对象的state
<div id="root"></div> <script> const App extends React.Component{ handleForm = e => { const target = e.target const value = target.type === "checkbox" ? target.checked : target.value //获取name const name = target.name this.setState({ [name]:value }) } render(){ return ( <input type="text" name="txt" value="{this.state.txt} onChange="{this.handleForm}"/> ) } } </script>
非受控组件(DOM方式)
借助 ref ,使用原生DOM方式来获取表单元素值
ref 的作用获取DOM或组件
使用步骤
1.调用React.createRef()方法创建一个 ref 对象
2.将创建好的 Ref 对象添加到文本框中
3.通过 ref 对象获取到文本框的值
<div id="root"></div> <script> const App extends React.Component{ constructor(){ super() this.txtRef = React.createRef() } getTxt = () => { console.log(this.txtRef.current.value ) } render(){ return ( <div> <input type="txt" ref={this.txtRef} /> <button onClick={this.getTxt} >获取文本框的值</button> </div> ) } } ReactDOM.render(<App />,document.getElementById('root')) </script>
小结:
1.组件的两种创建方式:函数组件和类组件
2.无状态(函数)组件,负责静态结构展示
3.有状态(类)组件,负责更新UI,让页面动起来
4.绑定时间注意this指向问题
5.推荐使用受控组建来处理表单
6.完全利用JS语言的能力创建组件,这是React的思想