文章目录
0 使用技术
- axios 请求数据
- json-server 模拟数据
- react 操作dom
- element-ui
1 项目搭建
1.1 创建项目
- 创建项目
create-react-app tips
项目名称为tips - 启动项目
npm start
1.2 搭建项目结构
- 准备数据
- 组件化开发
- 使用element-ui 官网地址
1.2.1 准备数据
- 使用json-server
- 模拟数据
- 测试数据
json-server tips.json
database/tips.json
{
"todos":[
{
"id":1,
"title":"吃饭",
"status":false
},
{
"id":2,
"title":"睡觉",
"status":true
},
{
"id":3,
"title":"上钟",
"status":false
},
{
"id":4,
"title":"打豆",
"status":true
},
{
"id":5,
"title":"上课",
"status":true
},
{
"id":6,
"title":"哒哒",
"status":true
}
]
}
1.2.2 组件化开发
- APP.js
import React,{Component} from 'react'
export default class APP extends Component{
constructor() {
super();
}
render() {
return(
<div>APP</div>
)
}
}
- index.js
import React from 'react';
import ReactDOM from 'react-dom';
import APP from "./APP";
ReactDOM.render(
<APP/>,
document.getElementById('root')
);
1.2.3 引入element-ui
- 下载依赖
cnpm i element-react -S
- 下载主题包
cnpm i element-theme-default -S
- 下载加载
cnpm i react-hot-loader -S
- 配置
element-ui
在入口文件中引入import 'element-theme-default'
- 重启项目
npm start
2 开发模块
2.1 Header模块
- 静态数据,可以使用无状态组件
import React from 'react'
export default function Header (prop){
return(
<div>
<h1 style={{color:'skyblue'}}>{prop.title}</h1>
</div>
)
}
2.2 Input模块
import React,{Component} from 'react'
import {Input,Button} from 'element-react'
export default class TipInput extends Component{
constructor() {
super();
}
render() {
return(
<div>
<Input style={{width:"30%"}} name='content' autoFocus/>
<Button type='success' onClick={this.addItem}>{this.props.btn}</Button>
</div>
)
}
addItem=()=>{
this.props.addItem(document.querySelector('input').value)
}
}
2.3 List模块
import React,{Component} from 'react'
import {Card} from 'element-react'
import Item from "./tipItem";
export default class List extends Component{
constructor() {
super();
}
render() {
return(
<div>
<Card className="box-card" style={{width:"30%",
marginTop:'20px'}}>
{
this.props.todos.map(el=>{
return <Item key={el.id} {...el} myCheck={this.props.myCheck}/>
})
}
</Card>
</div>
)
}
}
2.4 Item模块
import React,{Component,Fragment} from 'react'
import {Card,Checkbox} from "element-react";
import classNames from 'classnames'
import './index.css'
export default class Item extends Component{
constructor() {
super();
this.state={
isShow:''
}
}
componentWillReceiveProps(nextProps, nextContext) {
}
render() {
return(
<Fragment>
<div className="text item" className={classNames({'span':this.props.status})}>
<Checkbox checked={this.props.status} onChange={this.changeCheck}/>
<span>{this.props.title}</span>
<span >{this.props.status?'已完成':'未完成'}</span>
</div>
</Fragment>
)
}
changeCheck=()=>{
this.props.myCheck(this.props.id)
}
}
3 项目文件
- component/index.js
export {default as Header} from './tipHeader'
export {default as Input} from './tipInput'
export {default as List} from './tipList'
- Api/index.js
import axios from "axios";
import React from 'react'
axios.defaults.baseURL='http://127.0.0.1:3000'
React.Component.prototype.$http = axios
- APP.js
import React,{Component} from 'react'
import {Header,Input,List} from './component'
export default class APP extends Component{
constructor() {
super();
this.state={
title:'待办事项',
btn:'添加',
todos:[]
}
}
componentDidMount() {
this.getData()
}
render() {
return(
<div>
<Header {...this.state}/>
<Input {...this.state} addItem={this.addItem}/>
<List {...this.state} myCheck={this.updateCheck}/>
</div>
)
}
async getData(){
const res = await this.$http.get('/todos')
this.setState({
todos:res.data
})
}
addItem=async title=>{
const res = await this.$http.post('/todos',{
id:new Date().getTime(),
title,
status:false
})
console.log(this.state.todos)
await this.getData()
this.setState({
title:''
})
}
updateCheck=id=>{
this.setState(state=>{
return({
todos:state.todos.map(el=>{
if(el.id===id){
el.status=!el.status
}
return el
})
})
})
}
}
4 优化
4.1 条件渲染
4.1.1 旧版渲染
componentWillReceiveProps(nextProps, nextContext) {
this.setState({
status:nextProps.status?'已完成':'未完成'
})
}
4.1.2 新版渲染
- react 16.3以上
static getDerivedStateFromProps(props){
return{
status:props.status?'已完成':'未完成'
}
}
4.2 按需更新
4.2.1 利用生命周期
shouldComponentUpdate(nextProps, nextState, nextContext) {
return this.props.status===! nextProps.status
}
4.2.2 利用纯组件
export default class Item extends PureComponent
5 用户体验
6 总结
-
1 掌握组件之间传值
-
2 添加事项
- 父组件定义添加事项方法,通过绑定传给子组件(Input)
- 子组件通过参数的形式将值给父组件
- 父组件得到值后进行业务处理
- 不能通过push添加,可以
concat
- axios可以通过
post(url,obj)
- 不能通过push添加,可以
-
3 添加事项值
- 原生react
input
绑定ref
-------this.inputRef=createRef()
-----this.inputRef.current.value
- element-ui
document.querySelector('input').value
-
4 复选框选中
- 父组件 将方法绑定给子组件
- 子组件通过参数将id传给父组件
- 父组件遍历,判断是否相等,取反
-
5 优化 按需引入
-
pureComponent
-
shouldComponentUpdate()
return this.props.status===! nextProps.status
-
-
6 条件渲染
-
static getDerivedStateFromProps(props){ return{ status:props.status?'已完成':'未完成' } }
-
7 源码
码云地址:https://gitee.com/lakerzhang/tips.git