1. React的基本使用
1.1. 安装脚手架create-react-app
我们需要在我们的电脑上全局安装脚手架create-react-app
npm i -g create-react-app
1.2. 创建项目
我们可以利用脚手架创建我们的项目
create-react-app 项目名
有些使用windows的PowerShell可能会报错,我们可以输入cmd切换到cmd环境中
2. JSX语法
JSX指的就是在JS代码中直接写HTML代码,所谓的HTML其实就是JSX
2.1. VSCode配置
2.2. 插值
我们可以将变量通过{}
的形式插入到我们JSX中
<div>
{msg}
</div>
2.3. 列表渲染
可以用来渲染数组,在渲染后记得添加key
<ul>
{
数据.map((item, index) => <li key={index}>{item}</li>)
}
</ul>
<!-- vue的写法对比 -->
<ul>
<li v-for="item in 数据">{{item}}</li>
</ul>
2.4. 条件渲染
JSX中不支持if else,只能使用三元运算
{
{ show ? <div>show为true时显示</div> : <></> }
}
<!-- <></>表示空标签 -->
2.5. 事件绑定
React中所有的事件已on事件类型
形式体现,例如onClick
<button onClick={函数}>按钮</button>
<!-- 如果需要传参 -->
<button onClick={() => {函数(参数)}}>按钮</button>
3. React组件
react中有两种组件类组件
、无状态组件(函数式组件)
,在react16.8之后更新了hooks,以后的组件会更多的使用无状态组件。
3.1. 类组件
import { Component } from "react";
class ClassComponent extends Component{ // 这里必须继承React.Component
// 构造函数
constructor (props) {
super(props) // 必须要写super()
this.state = { // 这里就是Vue中的data
msg: "这是我的第一个类组件"
}
// 如果要设置state要用setState({msg: "新的内容"})
}
handle () {
// 事件函数
}
render () {
return (
<div>{this.state.msg}
// 在类组件中存在一个问题,就是事件函数中this指向的问题,所以在绑定事件事件时需要添加.bind(this)
<button onClick={this.handle.bind(this)}></button>
</div>
)
}
}
export default ClassComponent
3.1.1. 存在的问题
- 类组件中state固定,无法复用
- 事件中this指向问题,不直接指向组件
- 设置state很麻烦,获取state及事件都需要添加this.xxx
3.2. 无状态组件
无状态组件就是一个函数
const FuntionComponent = () => {
return (
<div>
JSX
</div>
)
}
export default FunctionComponent
4. 组件状态提升(组件通信)
通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父(祖先)组件中去
当我们需要把组件Child中的数据放置在Parent中获取时,这个操作叫组件的状态提升,通过props可以向子组件传递
Parent.js
const Parent = () => {
return (
<div>
<Child 属性名="数据" 属性名={动态数据}></Child>
</div>
)
}
export default Parent
Child.js
const Child = (props) => {
return (
<div>
{props.属性名} // 就是传递过来的数据
</div>
)
}
export default Child
5. Props的定义
props是父组件传递到子组件中的数据,写在子组件标签上
parent.js
const Parent = () => {
return (
<div>
<Child msg="消息"></Child>
</div>
)
}
child.js
const Child = (props) => {
return (
<div>
{props.msg}
</div>
)
}
5.1. 限制prop类型
需要安装prop-types
模块
child.js
import PropTypes from 'prop-types'
const Child = (props) => {
return (
<div>
{props.msg}
</div>
)
}
Child.propTypes = {
msg: PropTypes.string
}
5.2. prop默认值
可以定义prop的默认值,通过defaultProps
child.js
import PropTypes from 'prop-types'
const Child = (props) => {
return (
<div>
{props.msg}
</div>
)
}
Child.propTypes = {
msg: PropTypes.string
}
Child.defaultProps = {
msg: "默认值"
}
5.3. children
这是props中特殊的一个值,当我们给组件标签中添加内容时,内容会自动变成props.children
,通过这样的方式,可以实现,在标签上写内容,渲染到子组件中的效果
Parent.js
const Parent = () => {
return (
<div>
<Child>内容</Child>
</div>
)
}
Child.js
const Child = (props) => {
return (
<div>
{props.children} // 这个值就是我们父组件中在子组件标签内添加的内容
</div>
)
}
5.4. 类名的操作
需要借助模块classnames
import classNames from 'classnames'
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'