React 入门教程
React 官网
https://reactjs.org/docs/getting-started.html
React是一个用于构建用户界面的JavaScript库
有以下特点:
- 虚拟dom节点
- 单向数据流
- 组件开发思维
一. 使用命令行界面(CLI,command-line interface)工具。安装React 开发者工具
1.react的安装与创建
安装脚手架:npm i -g create-react-app
创建一个react项目:create-react-app 项目名称
2.脚手架命令
运行项目:npm run star
打包项目:npm run build
暴露webpack配置文件:npm run eject
3.首先要熟悉项目里的一些配置文件,要知道这些文件都是干什么用的
src结构
4.jxs语法:有以下特点
1. 只有一个根节点
2. {}可以直接写js
3. class用className
4. 对象样式自动展开
5. 数组里可以直接写html节点
6. {/* */}代表注释
5. 组件
分为函数组件和类组件
1. 函数组件:
无状态组件/ 视图组件
function App(){
return (<div> </div> )
}
export default App; //导出
2.类组件:
有状态组件/ 容器组件
import React,{Component} from 'react'\
export default class App extends Component{
render(){
return(<div> </div>)
}
}
3. 总结
- state是组件实例对象最重要的属性,必须是对象的形式\
- 组件被称为状态机,通过更改state的值来达到更新页面显示(重新渲染组件)
- 组件render中的this指的是组件实例对象
- 状态数据不能直接赋值,需要用setState()
6. 模板语法
1. 文本渲染:{ }
html文本渲染:dangerouslySetInnerHTML={{__html:xxx}}
2. 条件渲染
三元运算符:条件<p>?</p>
&&符号:{{条件&&<p></p>}}
3. 列表渲染:使用map映射
this.state.list.map(item=><h3>{item}</h3>)}
7. 事件:和原生js事件一致,需要驼峰式写法
1. 实例:onClick={this.sayHi}
2. 传参:onClick={()=>{this.sayHi(参数)}}
3. 传参:onClick={this.sayHi.bind(this,参数)}
8.更新state状态
1. this.state{(key,value)}
2. this.setState({key,value},()=>{console.log("执行回调完毕")})
二. 上述代码附上
//类组件 jsx语法
import React, { Component } from 'react'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
msg: "小兔子喜欢react",
isLog: true,
list: ["vue", "react", "jquery", "js"]
}
}
// sayHi() {
// alert("2022,万事胜意")
// }
sayHi = (msg = "爱党敬业") => {
alert(msg)
}
render() {
return (
<div>
{/*更新数据 setState*/}
<button onClick={() => { this.setState({ isLog: !this.state.isLog }, () => { console.log("切换数据完毕"); }) }}>切换</button><br />
{/* 事件*/}
<button onClick={() => alert("2022新年快乐")}>问候</button>
<button onClick={this.sayHi}>新年愿望</button>
<button onClick={() => { this.sayHi("爱党敬业") }}>新年愿望-传参</button>
<button onClick={this.sayHi.bind(this, '中国人不骗中国人')}>新年愿望-传参</button>
{/* 列表渲染 */}
{this.state.list.map(item => <h3 key={item}>{item}</h3>)}
{/*文本渲染*/}
{this.state.msg}
{/* 条件渲染*/}
{this.state.isLog ? <p>欢迎回来我的主人</p> : <p>请登录</p>}
{this.state.isLog && <p>中午红烧肉</p>}
</div>
)
}
}
1. 函数组件中的构造器仅用于以下两种情况
-
通过this.state赋值对象来初始化内部的state
-
为事件处理函数绑定实例
2.函数组件中的props
因为函数组件没有组件实例对象,所以其他两个state和refs是没有的,只有props属性可用,直接在()中接受props对象即可,函数内部就可以结构使用props中的值了
- 每个组件都会有props属性
- 组件标签的所有属性都保存在propps
- 组件内部不能改变外部传进来的props属性值