后端程序员入门react笔记（四）-综合运用，写一个小demo

样式模块化

有时候我们会遇到这样的问题，有两个css对一个class声明了样式，这样的话后引入的css会覆盖前面的css样式，导致样式冲突，那么我们怎么解决这种问题呢，我们可以使用样式的模块化，我们起名一个index.module.css和一个content.module.css
在这里插入图片描述

我们在代码中这样使用

import React from "react";
import index from "./css/index.module.css";
import content from "./css/content.module.css";

class Hello extends React.Component {
    render() {
        console.log("i am render")
        return (
            <ul>
                <h1 className={index.title}>i am index.css</h1>
                <h1 className={content.title}>i am content.css</h1>
            </ul>
        )
    }
}
//导出组件
export default Hello;

Webstorm中的快捷键

rcc+tab键：用ES6模块系统创建一个React组件类

import React, {Component} from 'react';

class Hello extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default Hello;

rccp+tab键：创建一个带有PropTypes和ES6模块系统的React组件类

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Hello extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

Hello.propTypes = {};

export default Hello;

rcfc+tab键：创建一个带有PropTypes和所有生命周期方法以及ES6模块系统的React组件类
rcjc+tab键：用ES6模块系统创建一个React组件类（无导出）
rdp+tab键：快速生成defaultProps
rpc+tab键：用PropTypes和ES6 moudle系统创建一个React纯组件类
rrc+tab键：创建一个连接到redux的React组件类
rrdc+tab键：创建一个通过dispatch连接到redux的React组件类
rsc+tab键：创建没有PropTypes和ES6模块系统的无状态React组件
rscp+tab键：创建有PropTypes和ES6模块系统的无状态React组件
rsf+tab键：以命名函数的形式创建无状态的React组件，不使用PropTypes
rsfp+tab键：使用PropTypes将无状态的React组件作为命名函数创建
rsi+tab键：创建无状态的React组件，不使用PropTypes和ES6模块系统，但使用隐式返回和道具
rwwd+tab键：在没有导入的情况下，在ES6模块系统中创建一个有构造函数、空状态、proptypes和导出的React组件类。(主要用于React时，proptype由webpack提供插件提供)

组件化编码

我们通过前面应该也能认识到，我们写react，包括npm运行react，其实都是从index.js入口文件开始，那么index.js的格式至关重要

//引入核心库
import React from 'react';
//引入dom库
import ReactDOM from 'react-dom';
//引入组件
import Hello from './components/Hello';
ReactDOM.render(<Hello />,document.getElementById('root'))

拆分组件的原则

单一职责原则：每个组件只负责一项功能，这样可以使组件的代码更加简洁易读，并且方便维护和重用。
可复用性：每个组件都应该尽量独立，以便在其他地方重复使用。
组件之间的耦合度：组件之间应该尽量避免耦合，这样可以使得组件的代码更加灵活，便于维护和修改。
让组件尽可能小：尽可能使组件的代码行数少，这样可以使代码更易读，并且方便维护。
可读性：组件的代码应该有良好的结构，并且有适当的注释，便于阅读和理解。

案列 TodoList

页面渲染

我先把一个没有任何功能的页面渲染出来，给一些初始数据

我们在入口文件中，分别声明引入的核心文件，dom库，和组件

//引入核心库
import React from 'react';
//引入dom库
import ReactDOM from 'react-dom';
//引入组件
import App from "./App";
ReactDOM.render(<App />,document.getElementById('root'))

在App组件初始化一些数据并返回页面结构,并将初始化数据通过props传给list

import React, {Component} from 'react';
import "./App.css"
import Header from "./components/Header/Header"
import Footer from "./components/Footer/Footer"
import List from "./components/List/List"
class App extends Component {
    //初始状态
    state={
        todos:[
            {id:1,text:"吃饭",done:false}
            ,{id:2,text:"睡觉",done:false}
            ,{id:3,text:"打豆豆",done:false}
            ,{id:4,text:"看动画",done:false}
        ]
    }
    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    {/*引入header组件*/}
                    <Header />
                    {/*引入list组件*/}
                    <List data={this.state.todos} />
                    {/*引入Footer组件*/}
                    <Footer />
                </div>
                
            </div>
        );
    }
}

export default App;

List.jsx

import React, {Component} from 'react';
import Item from "../Item/Item";
import "./List.css"
class List extends Component {
    //限制属性类型
    render() {
        const todos = this.props.data;
        return (
            <ul className="todo-main">
                {todos.map((todo, index) => {
                    // 将todo对象作为props传给Item组件  ...默认和对象同名
                    return <Item key={todo.id} {...todo}></Item>;
                })}
            </ul>
        );
    }
}

export default List;

Item.jsx

import React, {Component} from 'react';
import "./Item.css"

class Item extends Component {
    render() {
        const {id,text,done}=this.props
        return (
            <li style={{backgroundColor: 'white'}}>
                <label >
                    <input type="checkbox"/>
                    <span>{text}</span>
                </label>
                <button className="btn btn-danger" style={{display:'none'}}>删除</button>
            </li>
        );
    }
}
export default Item;

Header.jsx

import React, {Component} from 'react';

class Header extends Component {
    render() {
        return (
            <div className="todo-header">
                <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
            </div>
        );
    }
}
export default Header;

Footer.jsx

import React, {Component} from 'react';

class Footer extends Component {
    render() {
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox"/>
                    <span>
                        <span>已经完成2/全部5</span>
                    </span>
                </label>
                <button className="btn btn-danger">清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;

最终样式如下

功能实现

鼠标悬浮

首先我们来实现第一个功能，从简单功能入手，鼠标悬浮，列表背景色变色，并展示删除按钮，触发事件是onMouseEnter，鼠标离开恢复原状，触发事件是onMouseLeave，展示是否完成的状态，我们开始编写

class Item extends Component {

    //定义状态
    state={mouse:false}
               //接收参数
    handleMouse=(flag)=>{
       return ()=>{
           this.setState({
               mouse:flag
           })
       }
    }
    render() {
        const {id,text,done}=this.props
        const flag=this.state.mouse
        return (                                                                  //传入参数
            <li style={{backgroundColor: flag?'#ddd':'white'}} onMouseEnter={this.handleMouse(true)}
            onMouseLeave={this.handleMouse(false)}>
                <label >
                    <input type="checkbox" checked={done}/>
                    <span>{text}</span>
                </label>
                <button className="btn btn-danger" style={{display:flag?'block':'none'}}>删除</button>
            </li>
        );
    }
}

勾选和删除

实现勾选和删除功能，当点击选中按钮的时候，触发的操作是onChange,删除按钮的触发事件是onClick,我们来实现一下,因为我们操作的数据来源于App.jsx的state，为了方便操作数据，我们将方法写在App.jsx里面,然后通过props传递给组件

    updateTodo=(id,done)=>{
        const todos=this.state.todos
        //遍历找到对应的todo,创建一个新的数组对象
        const newTodos=todos.map((todo)=>{
            if (todo.id===id){//改变状态
                return {...todo,done:done}
            }else{
                return todo
            }
        })
        this.setState({todos:newTodos})
    }

    deleteTodo=(id)=>{
        const todos=this.state.todos
        const newTodos=todos.filter((todo)=>{
           return todo.id !==id
        })
        this.setState({todos:newTodos})
    }

Item.jsx

    handelChange=(id)=>{
        return (e)=>{
            //根据id和checked状态更新数据
            this.props.updateTodo(id,e.target.checked)
        }
    }
    del=(id)=>{
        return ()=>{
            this.props.deleteTodo(id)
        }
    }
    render() {
        const {id,text,done}=this.props
        const flag=this.state.mouse
        return (                                                                  //传入参数
            <li style={{backgroundColor: flag?'#ddd':'white'}} onMouseEnter={this.handelMouse(true)}
            onMouseLeave={this.handelMouse(false)}>
                <label >
                    <input type="checkbox" checked={done}  onChange={this.handelChange(id)}/>
                    <span>{text}</span>
                </label>
                <button className="btn btn-danger" onClick={this.del(id)} style={{display:flag?'block':'none'}}>删除</button>
            </li>
        );
    }

添加

接下来我们再实现一个添加todo的功能，触发事件就是Onkeyup
App.js

    addTodo=(todo)=>{
        const todos=this.state.todos
        const newTodos=[...todos,todo]
        console.log(newTodos);
        this.setState({todos:newTodos})
    }

header.jsx

    addTodo = (e) => {
        // console.log(e);
        const {keyCode, target} = e
        if (keyCode === 13) {
            const todo = {
                id: nanoid(),
                text: target.value,
                done: false
            }
            // console.log(todo);
            this.props.addTodo(todo);
            target.value = '';
        }
    }

全选和一键清除

app.js

    checkAll=(bool)=>{//全选或者取消全选
        const todos=this.state.todos
        const newTodos=todos.map((todo)=>{
            return {...todo,done:bool}
        })
        this.setState({todos:newTodos})
    }

    delAll=()=>{
        const todos=this.state.todos
        const newTodos=todos.filter((todo)=>{
            return !todo.done
        })
        this.setState({todos:newTodos})
    }

footer.jsx

class Footer extends Component {
    state = {
        checked: false
    };

    //如果是状态false 点击后全选中
    checkAll = () => {
        const  checked=this.state.checked;
        this.props.checkAll(!checked);
        this.setState({
            checked: !this.state.checked
        });
    };
    delAll = () => {
        this.props.delAll();
    };

    render() {
        const {todos} = this.props;
        const total=todos.length

        const doneCount=todos.reduce((prev,cur)=>{
            return prev+(cur.done?1:0);
        },0)

        return (
            <div className="todo-footer">
                <label>
                    <input onChange={this.checkAll} checked={this.state.checked} type="checkbox"/>
                    <span>
                        <span>已经完成{doneCount}/全部{total}</span>
                    </span>
                </label>
                <button className="btn btn-danger" onClick={this.delAll}>清除已完成任务</button>
            </div>
        );
    }
}