React学习笔记（五）

最新推荐文章于 2024-10-11 20:38:07 发布

皮卡卡卡

最新推荐文章于 2024-10-11 20:38:07 发布

阅读量31

点赞数

文章标签： react.js 学习笔记前端前端框架

本文链接：https://blog.csdn.net/qq_44808878/article/details/132972673

版权

theme: channing-cyan

一.项目的目录结构

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

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

```html

rel="icon" href="%PUBLIC_URL%/favicon.ico"> rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"> rel="manifest" href="%PUBLIC_URL%/manifest.json"> React App

```

src文件：

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

二.第一个脚手架应用

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

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

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

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

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

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

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

我们在顶一个Hello组件： jsx import React, {Componet} from 'react' export default class Hello extends Componet { render() { return ( <h1>Hello</h1> ) } }

在App组件中，进行使用

jsx 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

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

App.jsx

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 ```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*

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

export default class Header extends Component { render() { return (

Header/index.css

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

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

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

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

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; }

页面效果

六.动态组件

#### 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

jsx 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函数接受一个参数，这个参数就是要接受的子组件的数据通过这个参数，将子组件的数据传给父组件

jsx 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来调用函数函数的参数，就是子组件要传递给父组件的数据

jsx 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

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 ，【高阶函数+柯里化】在回调函数中返回传递过来的函数并传入参数

jsx 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 } }

jsx 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中然后将函数传递给子组件

jsx 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

中转拿到和函数继续传递

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作为函数参数传递给父组件定义绑定点击事件这次没用高阶函数，换了一种写法，效果是一样的

jsx 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 再从父组件接收两个函数然后调用

jsx 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.状态在哪里，操作状态的方法就在哪里