React学习笔记（五）

MINT
315 阅读10分钟

一.项目的目录结构

我们先来看一下public这个目录下面的结构：

1611817630266.png

这里面最主要的还是这个Index.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <!--%PUBLIC_URL%表示public文件夹的路径-->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
    <!--用于开启理想视口，用于移动端页面的适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!--用于配置浏览器地址栏的颜色（仅支持安卓手机浏览器）-->
    <meta name="theme-color" content="#000000"/>
    <!--描述网页信息的-->
    <meta
            name="description"
            content="Web site created using create-react-app"
    />
    <!--用于指定网页添加到手机主屏幕后的图标（仅仅支持ios）-->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
​
    <!--应用加壳时候的配置文件 -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
​
    <title>React App</title>
</head>
<body>
<!-- 浏览器不支持JS的运行的时候展现 -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

src文件：

1611818262317.png

这里面其实最主要的就是App.js以及index.js，一个是组件，一个是将组件渲染到页面中的。

二.第一个脚手架应用

  • 1.我们保持public中的Index.html不变
  • 2.修改src下面的APP.js以及index.js文件

App.js: 【注意：创建好的组件一定要暴露出去】

//创建外壳组件APP
import React from 'react'
​
class App extends React.Component {
    render() {
        return (
            <div>Hello word</div>
        )
    }
}
​
export default App

index.js: 【主要的作用其实就是将App这个组件渲染到页面上】

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

这样在重新启动应用，就成功了。

1611820194124.png

我们也不建议这样直接将内容放入App组件中，尽量还是用内部组件。

我们在顶一个Hello组件：

import React, {Componet} from 'react'
​
export default class Hello extends Componet {
    render() {
        return (
            <h1>Hello</h1>
        )
    }
}

在App组件中，进行使用

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

这样的结果和前面是一样的。

但是由于普通的Js和组件都是js，所一最好组件使用jsx去展示。

三.样式冲突

当组件逐渐增多起来的时候，我们发现，组件的样式也是越来越丰富，这样就很有可能产生两个组件中样式名称有可能会冲突，这样会根据引入App这个组件的先后顺序，后面的会覆盖前面的，

为了避免这样的样式冲突，我们采用下面的形式：

  • 1.将css文件名修改： hello.css --- >hello.module.css
  • 2.引入并使用的时候改变方式：
import React, {Component} from 'react'
import hello from './hello.module.css'  //引入的时候给一个名称
​
export default class Hello extends Component {
    render() {
        return (
            <h1 className={hello.title}>Hello</h1>   //通过大括号进行调用
        )
    }
}

四.功能界面的组件化编码流程

  • 1.拆分组件:拆分界面，抽取组件

  • 2.实现静态组件

  • 3.实现动态组件

    • 1.动态的显示初始化数据
    • 2.数据类型
    • 3.数据名称
    • 4.保存在哪个组件

  • 4.交互

五.todoList案例

5.1. 目标功能界面

QQ录屏1.gif

5.2.界面模块拆分

todoList模块划分.png

5.3.主页index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList案例</title>
</head>
<body>
    <div id = "root"></div>
</body>
</html>
​

5.4.静态页面搭建

index.js

import React from "react";
import ReactDDOM from "react-dom";
import App from "./App";
​
ReactDDOM.render(<App />, document.getElementById("root"));

App.jsx

import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import './App.css'
​
export default class App extends Component {
  render() {
    return (
      <div className="todo-container">
        <div className="todo-warp">
          <Header />
          <List />
          <Footer />
        </div>
      </div>
    );
  }
}

App.css

/*base*/
body {
   background: #fff;
 }
 
 .btn {
   display: inline-block;
   padding: 4px 12px;
   margin-bottom: 0;
   font-size: 14px;
   line-height: 20px;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
   border-radius: 4px;
 }
 
 .btn-danger {
   color: #fff;
   background-color: #da4f49;
   border: 1px solid #bd362f;
 }
 
 .btn-danger:hover {
   color: #fff;
   background-color: #bd362f;
 }
 
 .btn:focus {
   outline: none;
 }
 
 .todo-container {
   width: 600px;
   margin: 0 auto;
 }
 .todo-container .todo-wrap {
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 5px;
}

** Header/index.jsx**

import React, { Component } from 'react'
import './index.css'

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

Header/index.css

 /*header*/
 .todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
  }
​
  .todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  }

List/index.jsx

import React, { Component } from 'react'
import Item from '../Item'
import './index.css'
​
export default class List extends Component {
  render() {
    return (
      <ul className="todo-main">
        <Item />
      </ul>
    )
  }
}

List/index.css

/*main*/
.todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
  }
  
  .todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
  }

Item/index.jsx

import React, { Component } from 'react'
import './index.css'
​
export default class Item extends Component {
  render() {
    return (
      <li>
        <label>
          <input type="checkbox"/>
          <span>xxxxx</span>
        </label>
        <button className="btn btn-danger" style={{display:'none'}}>删除</button>
      </li>
    )
  }
}

Item/index.css

/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}
​
li label {
  float: left;
  cursor: pointer;
}
​
li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}
​
li button {
  float: right;
  display: none;
  margin-top: 3px;
}
​
li:before {
  content: initial;
}
​
li:last-child {
  border-bottom: none;
}

Footer/index.jsx

import React, { Component } from 'react'
import './index.css'
​
export default class Footer extends Component {
  render() {
    return (
      <div className="todo-footer">
      <label>
        <input type="checkbox"/>
      </label>
      <span>
        <span>已完成0</span> / 全部2
      </span>
      <button className="btn btn-danger">清除已完成任务</button>
    </div>
    )
  }
}

Footer/index.css

/*footer*/
.todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }
​
  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }
​
  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }
​
  .todo-footer button {
    float: right;
    margin-top: 5px;
  }

页面效果

xxx.png

六.动态组件

6.1 动态初始化页面

  • 状态驱动组件

考虑两个问题 要将状态放在哪？ 状态的存储形式是什么？

  • 1.可以将状态放在需要使用状态的 父组件 App中，这样Header和List都可以通过props拿到状态数据
  • 2.状态的存储形式采用对象数组
 //初始化状态
    state = {
        todos:[
            {id:'001',name:'吃饭',done:true},
            {id:'002',name:'睡觉',done:false},
            {id:'003',name:'打代码',done:true},
        ]
}

App.jsx

在App.jsx组件中定义状态state，通过标签属性传递给子组件List的props中

export default class App extends Component {
    // 初始化状态
     state = {
        todos:[
            {id:'001',name:'吃饭',done:true},
            {id:'002',name:'睡觉',done:false},
            {id:'003',name:'打代码',done:true},
        ]
    }
    
      render() {
        const  {todos} = this.state
        return (
          <div className="todo-container">
            <div className="todo-warp">
              <Header />
              <List todos={todos} />
              <Footer />
            </div>
          </div>
        )
     }
}

子组件通过this.props得到父组件传递过来的状态

通过循环遍历todos得到每一个todo，将他们传递给Item子组件 通过标签属性的形式，父组件List传递状态到子组件Item中 指定key 再展开todo传递给子组件

import React, {Component} from 'react'
import './index.css'
​
export default class List extends Component {
    render() {
        const {todos} = this.props
        return (
            <ul className='todo-main'>
                {
                    todos.map(todo => {
                        return <Item key={todo.id} {...todo}/>
                    })
                }
            </ul>
        )
    }
}

Item/index.jsx

子组件通过this.props得到父组件传递过来的每个todo的状态 动态渲染props中获取的状态 name 和 done

import React, {Item} from 'react';
import './index.css'
​
export default class Item extends Component {
    render() {
        return (
            <li>
                <lable>
                    <input type="checkbox" defaultChecked={done}/>
                    <span>{name}</span>
                    <button className="btn btn-danger" style={{display:'none'}}>删除</button>
                </lable>
            </li>
        );
    }
}

QQ截图20220111181459.png

6.2 动态添加todo

子组件要向父组件 传递 得到的输入值 可以通过调用函数， 传递参数的形式 来传递状态

App.jsx

状态在父组件中，修改状态的操作就定义在父组件中

在父组件中定义一个addTodo函数，然后通过标签传递给子组件 addTodo函数接受一个参数，这个参数就是要接受的子组件的数据 通过这个参数，将子组件的数据传给父组件

export default class App extends Component {
    //addTodo用于添加一个todo，接收的参数是todo对象
    addTodo = (todoObj)=>{
        //获取原todos
        const {todos} = this.state
        //追加一个todo
        const newTodos = [todoObj,...todos]
        //更新状态
        this.setState({todos:newTodos})
    }
​
    render() {
        const {todos} = this.state
        return (
            <div className="todo-container">
                <div className="todo-warp">
                    <Header addTodo={this.addTodo} />
                    <List todos={todos} />
                    <Footer />
                </div>
            </div>
        )
    }
}

Header/index.js 生成唯一id的库 uuid nanoid npm install nanoid

"nanoid": "^3.1.16"

父组件通过标签属性传递了一个函数给子组件，子组件可以通过this.props来调用函数 函数的参数，就是子组件要传递给父组件的数据

import React, { Component } from 'react'
import './index.css'
​
export default class Header extends Component {
    //键盘事件的回调
    handleKeyUp = (event) => {
        //解构赋值获取keyCode，target
        const {keyCode, target} = event
        //判断是否是回车按键
        if (keyCode !== 13) return
        //添加的todo名字不女为空
        if (target.value.trim() === '') {
            alert('输入不能为空')
            return
        }
        //准备好一个todo对象
        const todoObj = {id：naaoid(),name:target.value,done:false}
        //将todoObj传递给App
        this.props.addTodo(todoApp)
        //清空输入
        target.value = ''
    }
    
    render() {
        return (
        <div className="todo-header">
            <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
        )
    }
}

QQ录屏1.gif

6.3 鼠标悬浮高亮

定义一个mouse状态，用来 标识鼠标移入移出 通过mouse状态的改变，来改变style样式（背景颜色+删除按钮显示与隐藏）

Item/index.jsx

import React, {Component} from "react";
import './index.css'
​
export default class Item extends Component {
    //标识鼠标移入移出
    state = {
        mouse: false
    }
    //鼠标移入移出的回调
    handleMouse = (flag) => {
        return () => {
            this.setState({mouse: flag})
        }
    }
    render() {
        const { name, done } = this.props
        const {mouse} = this.state
        return (
            <li
                style={{ backgroundColor: mouse ? '#ddd' : 'white' }}
                onMouseEnter={this.handleMouse(true)}
                onMouseLeave={this.handleMouse(false)}
            >
                <label>
                    <input type="checkbox" defaultChecked={done}/>
                    <span>{name}</span>
                </label>
                <button className="btn btn-danger" style={{display: mouse?'block':'none'}}>删除</button>
            </li>
        )
    }
}

QQ录屏2.gif

6.4 勾选改变状态

勾选前面的选中框，要改变到state中的数据 根据选中的框所属的todo的id找到数据，根据更改后done的值更新相应的done的值

App.jsx

export default class App extends Component {
    //用于更新一个todo
    updateTodo = (id, done) => {
        const { todos } = this.state
        const newTodos = todos.map((todo) => {
            if (todo.id === id) {
                return {...todo, done: done}
            } else {
                return todo
            }
        })
        this.setState({todos: newTodos})
    }
  
      render() {
        const  {todos} = this.state
          return (
              <div className="todo-container">
                  <div className="todo-warp">
                      <Header addTodo={this.addTodo} />
                      <List todos={todos} updateTodo={this.updateTodo}/>
                      <Footer />
                  </div>
              </div>
          );
    }
}

List/index.jsx

中转 从父组件App中传过来的函数，继续传给它的子组件Item，完成祖孙组件中的通信

import React, {Component} from "react";
import './index.css'
​
export default class List extends Component {
    render() {
        const {todos, updateTodo} = this.props
        return (
            <ul className="todo-main">
                {
                    todos.map((todo) => {
                        return <Item key={todo.id} {...todo} updateTodo={updateTodo}/>
                    })
                }
            </ul>
        )
    }
}

Item/index.jsx

通过List中转终于拿到祖先组件App中的函数updateTodo

组件中定义onChange事件的回调函数handleCheck ，【高阶函数+柯里化】 在回调函数中返回传递过来的函数并传入参数

import React, {Component} from 'react'
import './index.css'
​
export default class Item extends Component{
    //勾选、取消勾选某一个todo的回调
    handleCheck = (id) => {
        return (event) => {
            this.props.updateTodo(id, event.target.checked)
        }
    }
    
    render() {
        const {id, name, done} = this.props
        const {mouse} = this.state
        return (
            <li style={{backgroundColor: mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)}
                onMouseLeave={this.handleMouse(false)}>
                <label>
                    {/*defaultChecked默认选中，第一次触发有效*/}
                    <input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
                    <span>{name}</span>
                </label>
                <button onClick={() => this.handleDelete(id)} className="btn btn-danger"
                        style={{display: mouse ? 'block' : 'none'}}>删除
                </button>
            </li>
        )
    }
}

6.5 对props进行限制

  • 类型及必要性设置

安装安装 prop-types 库 npm i prop-types

"prop-types": "^15.7.2"

import PropTypes from 'prop-types'
export default class Header extends Component {
    //对接收的props进行类型以及必要性的限制
    static propTypes = {
        addTodo: PropTypes.func.isRequired
    }
}

import PropTypes from 'prop-types'
export default class List extends Component {
    //对接收的props进行：类型、必要性的限制
    static propTypes = {
        todos: PropTypes.array.isRequired,
        updateTodo: PropTypes.func.isRequired,
        deleteTodo: PropTypes.func.isRequired,
    }
}

6.6 删除一个todo

选中一个todo，点击删除按钮，删除这个todo

App.jsx

因为状态数据在父组件中，所以删除todo的函数就定义在App中 然后将函数传递给子组件

export default class App extends Component {
    //deleteTodo用于删除一个todo对象
    deleteTodo = (id)=>{
        //获取原来的todos
        const {todos} = this.state
        //删除指定id的todo对象
        const newTodos = todos.filter((todoObj)=>{
            return todoObj.id !== id
        })
        //更新状态
        this.setState({todos:newTodos})
    }
​
    render() {
        const {todos} = this.state
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
                </div>
            </div>
        )
    }
}

List/index.jsx

中转拿到和函数继续传递

export default class List extends Component {
    //对接收的props进行类型以及必要性的限制
    static propTypes = {
        todos: PropTypes.array.isRequired,
        updateTodo: PropTypes.func.isRequired,
        deleteTodo: PropTypes.func.isRequired
    }
    
    render() {
        const {todos, updateTodo, deleteTodo} = this.props
        return (
            <ul className={todo-main}>
                {
                    todos.map(todo => {
                        return <Item key={todo.id} {...todo} updateTodo={updateTodo} deleteTodo={ deleteTodo }/>
                    })
                }
            </ul>
        )
    }
}

Item/index.jsx

得到传递到的函数，将id作为函数参数传递给父组件 定义绑定点击事件 这次没用高阶函数，换了一种写法，效果是一样的

export default class List extends Component {
    //对接收的props进行类型以及必要性的限制
    static propTypes = {
        todos: PropTypes.array.isRequired,
        updateTodo: PropTypes.func.isRequired,
        deleteTodo: PropTypes.func.isRequired
    }
    
    //删除一个todo的回调
    handleDelete = (id) => {
        if (window.confirm(`确定删除嘛？`)) {
            this.props.deleteTodo(id)
        }
    }
​
    render() {
        const {id, name, done} = this.props
        const {mouse} = this.state
        return (
           <li 
               style={{backgroundColor: mouse ? '#ddd' : 'white'}}
               onMouseEnter={this.handleMouse(true)}
               onMouseLeave={this.handleMouse(false)}
           >
               <label>
                   <input type="checkbox" defaultChecked={done} onChange={this.handleCheck(id)}/>
                   <span>{name}</span>
               </label>
               <button onClick={()=> this.handleDelete(id)} className='btn btn-danger' style={{display:mouse?'block':'none'}}>删除</button>
           </li>
        )
    }
}

QQ录屏3.gif 在App中将todos传给Footer 在App中定义全选和全不选的todos来更新状态 在App中定义清除所有已完成的todo

export default class App extends Component {
    //checkAllTodo用于全选
    checkAllTodo = (done)=>{
        //获取原来的todos
        const {todos} = this.state
        //加工数据
        const newTodos = todos.map((todoObj)=>{
            return {...todoObj,done}
        })
        //更新状态
        this.setState({todos:newTodos})
    }
​
    //clearAllDone用于清除所有已完成的
    clearAllDone = ()=>{
        //获取原来的todos
        const {todos} = this.state
        //过滤数据
        const newTodos = todos.filter((todoObj)=>{
            return !todoObj.done
        })
        //更新状态
        this.setState({todos:newTodos})
    }
​
    render() {
        const {todos} = this.state
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
                </div>
            </div>
        )
    }
}

Footer/index.jsx

拿到todos 用来计算两个数据doneCount和total，显示在页面中 定义两个回调函数handleCheckAll和handleClearAllDone 再从父组件接收两个函数然后调用

import React, {Component} from 'react'
import './index.css'
​
export default class Footer extends Component {
​
    //全选checkbox的回调
    handleCheckAll = (event) => {
        this.props.checkAllTodo(event.target.checked)
    }
​
    //清除已完成任务的回调
    handleClearAllDone = () => {
        this.props.clearAllDone()
    }
​
    render() {
        const {todos} = this.props
        //已完成的个数
        const doneCount = todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)
        //总数
        const total = todos.length
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" onChange={this.handleCheckAll} checked={doneCount === total && total !== 0}/>
                </label>
                <span>
                    <span>已完成{doneCount}</span> / 全部{total}
                </span>
                <button onClick={this.handleClearAllDone} className="btn btn-danger">清除已完成任务</button>
            </div>
        )
    }
}

QQ录屏4.gif

五.总结

注意事项：

  • 1.拆分组件、实现静态组件。注意className、style的写法

  • 2.动态初始化列表，如何确定将数据放在哪个组件的state中？

    • 某个组件使用：放在自身的state中
    • 某些组件使用：放在他们共同的父组件中【状态提升】

  • 3.关于父子组件之间的通信

    • 父组件给子组件传递数据：通过props传递
    • 子组件给父组件传递数据：通过props传递，要求父组件提前给子组件传递一个函数

  • 4.注意defaultChecked 和checked区别，defalutChecked只是在初始化的时候执行一次，checked没有这个限制，但是必须添加onChange方法类似的还有：defaultValue 和value

  • 5.状态在哪里，操作状态的方法就在哪里

六.参考

React官网：react.docschina.org

尚硅谷视频：www.bilibili.com/video/BV1wy…

avatar
文章
阅读
粉丝