React语法
一，什么是react
1. React的特点
1，声明式
2. 基于组件
3. 学习一次，随处使用
二，React的使用
1. React的安装
npm i react react-dom
react 包是核心，提供创建元素，组件等功能
React-dom包提供DOM相关功能等
<body>
<div id="root"></div>
<!-- 1. 引入js文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
// 2 创建react元素
// 参数一； 元素名称
// 参数二； 元素属性
// 参数三； 第三个及其以后的元素 元素的子节点
const title = React.createElement('h1', null, 'Hello React')
// 3 渲染react元素
// 参数一：要渲染的react元素
// 参数二：挂载点
ReactDOM.render(title, document.getElementById('root'))
</script>
</body>
通常我们不使用这个方法创建react元素，比较麻烦
三，React脚手架的使用
1. 初始化项目
npx create-react-app my-app
2. 启动项目
在项目的根目录执行命令：npm start
出现这个页面也就成功了
四，JSX的使用
jsx是JavaScript XML的简写，表示在JavaScript中写XML（html）格式的代码
1. 简单使用
const title = <h1> jsx hello
<span> span hello </span>
</h1>
ReactDOM.render(title, document.getElementById('root'))
3. 推荐写法
- React元素的属性名使用驼峰法命名
- 特殊属性名：
class -> className, for ->htmlFor, tabindex ->tabIndex - 没有子节点的React元素可以用
/>结束 - 使用小括号包裹jsx，避免js中的自动添加分号陷阱
const title = (
<h1 className="title">
jsx hello
<span> span hello </span>
</h1>
)
ReactDOM.render(title, document.getElementById('root'))
4. 嵌入js表达式
语法格式：{js表达式}
const name = 'Jack'
const title = (
<h1>
hello jsx, {name}
</h1>
)
ReactDOM.render(title, document.getElementById('root'))
5. JSX 的条件渲染
const isLoading = true
// 条件渲染
const loadData = () => {
return isLoading ? (<div>loading......</div>) : (<div>数据加载完成，此处显示为</div>)
}
const title = (
<h1>
加载数据：
{loadData()}
</h1>
)
ReactDOM.render(
title,
document.getElementById('root')
);
6. JSX 的列表渲染
const songs=[
{id：1，name:'痴心绝对'}，
{id：2，name:'像我这样的人'}，
{id：3，name:'南山南'}，
]
// 使用列表的map方法映射
// key 与vue 中的key 是一样的 唯一性
const list=(
<ul>
{songs.map(item=<1i key={item.id}>{item.name}</1i>)}
</ul>
)
7. JSX的样式喧嚷
- 行内式—style
// JSX的样式处理
const list=（
<h1 style={{color:'red'， backgroundColor:‘skyblue}}>
JSX的样式处理
</h1>
)
//渲染react元素
ReactpoM.render（list，document.getElementById（'root"））
- 类名 ----className
五，React 组件使用
- 组件是React的一等公民，使用React就是在用组件
- 组件表示页面中的部分功能
- 组合多个组件实现完整的页面功能
- 特点：可复用、独立、可组合
1. 使用函数创建组件
1. 函数名首字母大写
2. 必须要有返回值（可以返回null）
/*
函数组件
*/
// function Hello() {
// return(
// <div>这是一个函数组件</div>
// )
// }
// 箭头函数组件
const Hello = () => <div>这是一个函数组件</div>
ReactDOM.render(
<Hello></Hello>,
document.getElementById('root')
);
2. 类组件
// 类组件
class Hello extends React.Component {
render(){
return <div>这是一个类组件</div>
}
}
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
3. 抽离到独立的js文件
- Hello.js
import React from 'react'
// 独立的js文件，类组件
class Hello extends React.Component {
render() {
return (
<div>这是一个抽离到js文件的组件</div>
)
}
}
// 导出组件
export default Hello
- index.js
// 导入组件
import Hello from './Hello'
// 渲染组件
ReactDOM.render(
<Hello />,
document.getElementById('root')
)
六，React 事件处理
1. 事件绑定
-
React 事件绑定语法与DOM事件语法相似
-
语法：
on+事件名称=（事件处理程序}，比如：onClick={0=>0} -
注意：React 事件采用驼峰命名法，比如：
onMouseEnter、onFocus -
// 类组件 class Hello extends React.Component { // 事件处理函数 handleClick(){ console.log('单击事件触发了') } // render 必须要写， render() { return ( <button onClick={this.handleClick}>点击事件</button> ) } } export default Hello ============= ============= // 函数组件 function App1() { // 处理函数 function handleClick() { console.log('函数组件中的事件绑定，') } // 必须有return return ( <button onClick={handleClick}>点我</button> ) } ReactDOM.render( <App1 />, document.getElementById('root') )
2. 事件对象
- 可以通过事件处理程序的参数获取到事件对象
- React中的事件对象叫做：**合成事件**（对象）
- 合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题
- ```
function App1() {
function handleClick(e) {
// 阻止浏览器的默认行为
// e.preventDefault()
console.log('a标签单击事件触发了')
}
return (
<a href="http://www.baidu.com" onClick={handleClick}>点击事件</a>
)
}
ReactDOM.render(
<App1 />,
document.getElementById('root')
)
3. 有状态组件和无状态组件
- 函数组件又叫做无状态组件，类组件又叫做有状态组件
- 状态（state）即数据
- 函数组件没有自己的状态，**只负责数据展示**（静）
- 类组件有自己的状态，**负责更新Ul**，让页面“动”起来
- ```
// 类组件
class Hello extends React.Component {
/* constructor(){
// ES6 规范
super()
// 初始化state
this.state = {
count: 0
}
} */
// 简写语法 初始化state
state = {
count: 20
}
// render 必须要写，
render() {
return (
<div>
<p>
计算器：{this.state.count}
</p>
</div>
)
}
}
export default Hello
```
- **总结**
- 状态即数据
- 状态是私有的，只能在组件内部使用
- 通过this.state来获取状态
4. setState()修改状态
- 状态是可变的
- 语法：this.setState（{要修改的数据}）
- 注意：不要直接修改state中的值，这是错误的！！！
- setState0作用：**1.修改state 2.更新Ul**
- 思想：**数据驱动视图**
```
//正确
this.setState（{
count:this.state.count +1
}）
//错误
this.state.count +=1
- 状态是可变的
- 语法：this.setState（{要修改的数据}）
- 注意：不要直接修改state中的值，这是错误的！！！
- setState0作用：1.修改state 2.更新Ul
- 思想：数据驱动视图
//正确
this.setState（{
count:this.state.count +1
}）
//错误
this.state.count +=1
==================
==================
// 简写语法 初始化state
state = {
count: 20
}
// render 必须要写，
render() {
return (
<div>
<p>
计算器：{this.state.count}
</p>
<button onClick={() =>{
this.setState({
count: this.state.count +1
})
}}>+1</button>
</div>
)
}
事件处理程序
- 原因：事件处理程序中this的值为undefined
- 希望：this 指向组件实例（render方法中的this即为组件实例）
5. 事件绑定this指向
1. 箭头函数
-
利用箭头函数自身不绑定this的特点
-
class Hello extends React.Component{ onIncrement() { console.log('this的对象',this) this.setState({ count: this.state.count +1 }) } render() { //箭头函数中的this指向外部环境，此处为：render（）方法 return( <button onclick={() => this.onIncrement() }></button> ) }
-
Function.prototype.bind( )
-
利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起
-
class Hello extends React.Component{ constructor() { super() // bind方法 this.onIncrement = this.onIncrement.bind(this) } //...省略onIncrement render() { return( <button onclick={this.onIncrement}></button> ) } }
-
-
class的实例方法
-
利用箭头函数形式的class实例方法
-
·注意：该语法是实验性语法，但是，由于babel的存在可以直接使用
-
class Hello extends React.Component{ onIncrement = () =>{ this.setstate({.…}) render() { return( <button onclick={this.onIncrement}></button> ) }
-
七，表单处理
1. 受控组件
-
让state与表单元素的value绑定（控制表单元素值的来源）
-
onChange事件函数来控制state
-
// 简写语法 初始化state state = { txt: '请输入' } inDate = (e) => { this.setState({ txt: e.target.value }) console.log(this.state.txt) } // render 必须要写， render() { return ( <div> <input type='text' value={this.state.txt} onChange={this.inDate}></input> </div> ) }多表单元素优化步骤
-
给表单元素添加name属性，名称与state相同
-
根据表单元素类型获取对应值
-
在change 事件处理程序中通过
[name]来修改对应的state<input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />handleForm = e =>{ const target = e.target //根据表单元素类型获取值type="text" const value = target.type === 'checkbox' ? target.checked : target.value //根据name设置对应state this.setstate（{ [name]：value }） }
-
2. 非受控组件
使用步骤：
1.调用React.createRef0方法创建一个ref对象
constructor(){
super()
this.txtRef=React.createRef()
}
2.将创建好的ref对象添加到文本框中
<input type="text"ref={this.txtRef}/>
3.通过ref 对象获取到文框的值
Console.log（this.txtRef.current.value）
不建议使用非受控组件
React组建基础—总结
1.组件的两种创建方式：函数组件和类组件
2.无状态（函数）组件，负责静态结构展示
3.有状态（类）组件，负责更新Ul，让页面动起来
4.绑定事件注意this 指向问题
5.推荐使用受控组件来处理表单6.完全利用JS语言的能力创建组件，这是React的思想
八，组件的进阶
1.组建的props
-
组件是封闭的，要接收外部的数据应该通过
props来实现 -
props的作用：接收传递给组件的数据
-
传递数据：给组件表亲啊添加属性
-
接收数据：函数组件通过参数
props接收数据，类组件通过this.props接收数据class Hello extends React.Component { // render 必须要写， render() { // 类组件中 props console.log(this.props); return ( <div> <h1>props: {this.props.name} </h1> </div> ) } } // 函数组件 const Hello1 = props =>{ // props 是一个对象 console.log(props); return ( <div> <h1>props: {this.props.name} </h1> </div> ) } // 传入数据 数字类型 {数字} ReactDOM.render( <Hello name="jay" age={17}/>, document.getElementById('root') )特点
-
1.可以给组件传递任意类型的数据
-
2.
props是只读的对象，只能读取属性的值，无法修改对象 -
3.注意：使用类组件时，如果写了构造函数，应该将
props传递给super()，否则，无法在构造函数中获取到props！ -
class Hello extends React.Component { constructor(props) { //推荐将props传递给父类构造函数 super(props) } render() { return <div>接收到的数据：{this.props.age}</div> } }
-
2.Context
-
使用步骤
-
1.调用
React.createContext()创建Provider（提供数据）和Consumer（消费数据）两个组件 -
const {Provider, Consumer} = React.createContext() -
2.使用Provider组件作为父节点
-
<Provider> <div> <Child /> </div> </Provider> -
总结
-
1.如果两个组件是远方亲戚（比如，嵌套多层）可以使用Context实现组件通讯
-
2.Context提供了两个组件：
Provider和Consumer -
3.Provider组件：用来提供数据
-
4.Consumer组件；用来消费数据
3.Children 属性
- children属性：表示组件标签的子节点。当组件标签有子节点时，props就会有该属性
- children属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）
const Test = () => <button>我是button组件</button>
const App = props => {
console.log(props)
return (
<div>
<h1>组件标签的子节点：</h1>
{props.children}
</div>
)
ReactDoM.render(
<App>
{/*<p>我是子节点，是一个p标签</p>*/}
<Test />
</App>,
document.getElementById('root')
)
4.props校验
-
1.props校验：允许在创建组件的时候，就指定props的类型、格式等
-
作用：捕获使用组件时因为props导致的错误，给出明确的错误提示，增加组件的健壮性
-
使用步骤
-
1. 安装包 prop-types(yarm add prop-types/npm i props-types) 2. 导入prop-types包 3. 使用 组件名.propTypes = {} 来给组件的props添加校验规则 import PropTypes from 'prop-types' function App (props){ return ( <h1>Hi, {props.colors}</h1> ) } App.propTypes = { // 约定color属性为array类型 //如果类型不对，则报出明确错误，便于分析错误原因 colors: PropTypes.array }约束规则
1.常见类型：array、bool、func、number、object、string
2.React元素类型：element
5.props默认值
// props默认值
const App = props => {
console.log(props)
return (
<div>
<h1>此处展示props的默认值：{props.pagesize}</h1>
</div>
)
}
//添加props默认值
App.defaultProps = {
pagesize: 10
}
ReactpoM.render(<App pagesize = { 20} />, document.getElementById("root"))
6.组件的生命周期
-
1.只有类组件，才有生命周期
-
-
-
7.render props 模式
-
使用步骤
-
1.创建Mouse组件，在组件中提供复用的状态逻辑代码（1.状态2.操作状态的方法）
-
2.将要复用的状态作为
props.render（state）方法的参数，暴露到组件外部 -
3.使用
props.render()的返回值作为要渲染的内容class Mouse extends React.Component{ //.省略state和操作state的方法 render(){ return this.props.render(this.state) } <Mouse render={(mouse) => <p>鼠标当前位置{mouse.x}，{mouse.y}</p>}/>
8.高阶组件
使用步骤
1.创建一个函数，名称约定以with开头
2.指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
3.在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
4.在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
5.调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中
// 创建高阶组件
function withMouse(WrappedComponent) {
// 该组件提供复用的状态逻辑
class Mouse extends React.Component {
// 鼠标状态
state ={
x:0.
y:0
}
handleMouseMove = e =>{
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 控制鼠标状态的逻辑
componentDidMount(){
window.addEentListener('mousemove',this.handleMouseMove)
}
componentwi11unmount(){
window.removeEventListener('mousemove',this.handleMouseMove)
}
render() {
return <WrappedComponent {...this.state} />
}
}
return Mouse
}
//创建组件
const MousePosition=withMouse（Position）
//渲染组件
<MousePosition/>
解决使用高阶组件，同名问题 设置display Name
// 设置displayName
Mouse.displayName = `WithMouse${getDisplayNmae(WrappedComponent)}`
return Mouse
}
function getDisplayNmae(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}
传递props
- 解决方式：渲染
WrappedComponent时，将this.state,this.props一起传递给组件
render() {
return <WrappedComponent {...this.state} {...this.props} />
}
九，React原理
1. setState（）是异步的
-
setState()是异步更新的 -
注意：使用该语法时，后面的
setState（）不要依赖于前面的setState（） -
可以多次调用
setState（）只会触发一次render()重新渲染，这是为了性能提升 -
handleclick = () => { //此处，更新state this.setstate({ count: this.state.count + 1//1+1 }) this.setstate({ count: this.state.count + 1//1+1 }) console.log('count:', this.state.count) //1 } -
推荐语法
-
推荐：使用
setState((state,props) => {}) -
参数state：表示最新的state
-
参数props：表示最新的props
-
handleclick = () => { //此处，更新state // 注意：这种语法也是异步更新的 this.setState((state, props) => { return { count: state.count + 1 } }) console.log('count:', this.state.count) //1 } -
1.3第二个参数
-
场景：在状态更新（页面完成重新渲染）后立即执行某个操作
-
语法：
setState（updaterLcallback]） -
this.setstate( (state, props) => {}, () => {console.log('这个回调函数会在状态更新后立即执行')} )
2.组件更新机制
setState（）的两个作用：1.修改state 2，更新组件（UI）- 过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件及其所有子组件0
3.组件的性能优化
-
state 不要存储与渲染无关的数据
-
避免不必要的重新渲染
-
解决方式：使用钩子函数
shouldComponentUpdate(nextProps，nextState) -
作用：通过返回值决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染
-
触发时机：更新阶段的钩子函数，组件重新渲染前执行
(shouldComponentUpdate→render) -
class Hello extends Component { shouldComponentUpdate(){ //根据条件，决定是否重新渲染组件 return false } render(){...} }
-
4.纯组件
-
说明：纯组件的内部对比是
shallow compare（浅层对比） -
对于引用类型来说：只比较对象的引用（地址）是否相同
-
注意：state或props中的属性值为引用类型时，应该创建新数据，不要直接修改源数据
-
//正确！创建新数据 const newobj = { ...state.obj，number：2} setstate({ obj: newobj }) //正确！创建新数据 //不要用数组的push/unshift等直接修改当前数组的的方法 //而应该用concat或slice等这些返回新数组的方法 this.setstate({ list: [...this.state.list，{ 新数据 }] })
5.虚拟DOM，diff算法
6.React 原理揭秘
1.工作角度：应用第一，原理第二。
2.原理有助于更好地理解 React的自身运行机制。
3.setState0异步更新数据。
4.父组件更新导致子组件更新，纯组件提升性能。
5.思路清晰简单为前提，虚拟DOM和Dif保效率。
6.虚拟DOM>state+JSX。
7.虚拟DOM的真正价值从来都不是性能。
十，路由的基本使用
1.安装 npm i react-router-dom
2.导入路由 组件
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
3.使用Router组件包裹整个应用（重要）
<Router>
<div className="App">
// ...省略页面内容
</div>
</Router>
案例
- path 会与pathname 匹配
import { BrowserRouter as Router,Route,Link } from 'react-router-dom'
const First =() => <p>页面一的内容</p>
//3使用Router组件包裹整个应用
const App1 = () => (
<Router>
<div>
<h1>React路由基础</h1>
{/*4指定路由入口*/}
<Link to="/first">页面一</Link>
{/*5脂定路由出口*/}I
<Route path="/first" component={First} />
</div>
</Router>
)
2.路由的执行过程
-
点击Link 组件（a标签），修改了浏览器地址栏中的url。
-
React 路由监听到地址栏url的变化。
-
React 路由内部遍历所有 Route组件，使用路由规则（path）与pathname进行匹配。
-
当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件的内容。
-
添加
exact属性 精确匹配 只有当path和pathname完全匹配才会展示该路由 -
// 此时，该组件只能匹配 pathname="/first" 这种情况 <Route exact path="/first" component={First} /> -
React路由的一切都是组件，可以像思考组件一样思考路由
扫一扫
2528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
