超級詳細react筆記(十三)項目篇(待辦事項)

文章目錄

• 0 使用技術
• 1 項目搭建
• • 1.1 建立項目
  • 1.2 搭建項目結構
  • • 1.2.1 準備資料
    • 1.2.2 元件化開發
    • 1.2.3 引入element-ui
• 2 開發子產品
• • 2.1 Header子產品
  • 2.2 Input子產品
  • 2.3 List子產品
  • 2.4 Item子產品
• 3 項目檔案
• 4 優化
• • 4.1 條件渲染
  • • 4.1.1 舊版渲染
    • 4.1.2 新版渲染
  • 4.2 按需更新
  • • 4.2.1 利用生命周期
    • 4.2.2 利用純元件
• 5 使用者體驗
• 6 總結
• 7 源碼

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>    &nbsp;&nbsp;&nbsp;&nbsp;
                    <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 利用純元件

5 使用者體驗

6 總結

• 1 掌握元件之間傳值
• 2 添加事項
  • 父元件定義添加事項方法,通過綁定傳給子元件(Input)
  • 子元件通過參數的形式将值給父元件
  • 父元件得到值後進行業務處理
    • 不能通過push添加,可以

      concat

    • axios可以通過

      post(url,obj)

• 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