React
用于构建用户界面的JavaScript库
特点
- 声明式: 只需要描述UI(HTML)看起来什么样,就显示什么样
- 基于组件
- 学习一次,随处可以使用
基本使用
- 安装
npm install react react-dom
- 引入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>
- 创建React元素
- 渲染React元素到页面中
<div id="root"></div>
<script>
const title = React.createElement('h1',{null},'Hello React',[可以继续添加节点])
ReactDOM.render(title,document.getElementById('root'))
</script>
React脚手架
- 创建脚手架命令
npx create-react-app my-react
cd my-react
yarn start / npm start
npx命令介绍
npx v5.2.0引入的一条命令- 目的: 提升包内提供的命令行工具的使用体验
- 原来: 先安装脚手架包,再使用这个包中提供的命令
- 现在:
无需安装脚手架包,就可以直接使用这个包提供的命令
yarn介绍
- yarn是Facebook发布的包管理器,可以看作是npm的替代品,功能与npm相同
- yarn具有快速,可靠和安全的特点
- 初始化新项目:
yarn init - 安装包:
yarn add 包名称 - 安装项目依赖项:
yarn
在脚手架中使用React
//1. 导入react
import React from 'react'
import ReactDOM from 'react-dom'
//2. 创建react元素
const title = React.createElement('h1',null,'Hello React')
//3. 渲染react元素
ReactDOM.render(title,document.getElementById('root'))
JSX
JSX是JavaScript XML的简写,表示在JavaScript代码中写XML(HTML)格式的代码
JSX的基本使用
- 使用JSX语法创建react元素
//使用JSX语法,创建react元素
const title = {
<h1>Hello JSX</h1>
}
//渲染react元素
ReactDOM.render(title,document.getElementById('root'))
注意点
- React元素的属性名使用驼峰命名法
- 特殊属性名: class—>
className, for—>htmlFor,tabindex—>tablndex - 没有子节点的React元素可以使用
/>闭合标签结束 - 推荐使用
小括号包裹JSX,从而避免JS中自动插入分号陷阱
JSX中使用JavaScript表达式
- 数据存储在JS中
const name = 'Jack'
const dv = {
//使用{}去获取动态的值
<div>{name} 你好,欢迎</div>
}
注意点
- 单大括号中可以使用任意的JavaScript表达式
- JSX自身也是JS表达式
- 注意: JS中的对象是一个例外,一般只会出现在style属性中
- 注意: 不能在{}中出现if/for这样的语法
JSX的条件渲染
//实现一个loading...加载的效果
const isLoading = true
const loadData = ()=>{
if(isLoading){
return <div>loading...</div>
}
return <div>数据加载完成,此处显示加载后的数据</div>
}
const title = {
<h1>
条件渲染:{ loadData() }
</h1>
}
//渲染react元素
ReactDOM.render(title,document.getElementById('root'))
JSX的列表渲染
如果要渲染一组数据,应该使用数组的map()方法
const songs = [
{id: 1, name: '张三'},
{id: 2, name: '李四'},
{id: 3, name: '王五'}
]
const list = {
<ul>
{ songs.map(item => <li key={item.id}>{ item.name }</li>) }
</ul>
}
//渲染react元素
ReactDOM.render(list,document.getElementById('root'))
JSX样式处理
行内样式
<h1 style={{ color: 'red',backgroundColor: 'skyblue' }}>
JSX的样式处理
</h1>
类名---------className
React组件基础
特点: 可复用,独立,可组合
创建方式
使用函数创建组件
- 函数名称必须以大写字母开头
- 函数组件必须有返回值,表示该组件的结构
//方式一
function Hello(){
return {
<h1>这是一个组件</h1>
}
}
//渲染组件
ReactDOM.render(<Hello/>,document.getElementId('root'))
//方式二
const Hello = () => <div>函数组件</div>
//渲染组件
ReactDOM.render(<Hello/>,document.getElementId('root'))
使用类创建组件
- 类名称必须以大写字母开头
- 类组件应该继承ReactComponent父类,从而可以使用父类中提供的方法或属性
- 类组件必须提供render()方法
- render()方法必须有返回值,表示该组件的结构
class Hello extends React.Component {
render(){
return (
<h1>这是一个类组件</h1>
)
}
}
//渲染组件
ReactDOM.render(<Hello/>,document.getElementId('root'))
抽离为独立的JS文件中
- 创建js文件
- 在js文件中导入React
- 创建组件
- 在js文件中导出该组件
- 在index.js中导入Hello组件
- 渲染组件
事件绑定
class App extends React.Component{
// 事件处理程序
handleClick() {
console.log('单机事件触发')
}
render() {
return (
<button onClick={ this.handleClick }></button>
)
}
}
事件对象
class App extends React.Component{
// e为事件处理对象
handleClick(e) {
//组织默认跳转
e.preventDefault()
console.log('单机事件触发')
}
render() {
return (
<a src='url' onClick={ this.handleClick }></a>
)
}
}
有状态组件和无状态组件
- 函数组件叫做
无状态组件,类组件又叫做有状态组件 - 状态即数据
组件中的state和setState
state的基本使用
- 状态(state)即数据,是组件内部的私有数据,只能在组件内部使用
- state的值是对象,表示一个组件中可以有多个数据
//初始化state数据
//方式一
constructor(){
super()
}
this.state = {
count: 0
}
//方式二
state = {
count: 0
}
使用
class App extends React.Component {
state = {
count: 0
}
render(){
return (
<div>
<h1>计数器: { this.state.count }</h1>
</div>
)
}
}
setState()修改状态
- 状态是可变的
- 语法: this.setState({要修改的数据})
- 不能直接修改state中的值,会报错
- setState()作用: 1.修改state 2. 更新UI
class App extends React.Component {
state = {
count: 0
}
render(){
return (
<h1>计算器: {{this.state.count}}</h1>
<button onClick = {()=>{
this.setState({
count: this.state.count + 1
})
}}>+1</button>
)
}
}
从JSX中抽离事件处理程序
- JSX中参杂过多JS逻辑代码,会显得非常混乱
- 推荐:
讲逻辑抽离到单独的方法中,保证JSX结构清晰
看下面的this处理指向问题
事件处理中this指向
箭头函数
class App 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>
}
}
}
Function.proptotype.bind()
class App 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 App 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>
}
}
}
iv>
}
}
}
class的实例方法
class App 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>
}
}
}
本文含有隐藏内容，请 开通VIP 后查看