初探react,用react实现一个todoList功能
- 🛰️前言
- 🚀一、react基础
- 1. react简介
- 2. 开发环境搭建
- 3. 工程目录文件简介
- 4. react中最基础的JSX语法
- 🛸二、使用react编写TodoList功能
- 1. 页面构思
- 2. React中的响应式设计思想和事件绑定
- 3. 实现TodoList新增删除功能
- (1)新增功能
- (2)删除功能
- 🪐三、对TodoList功能进行进阶操作
- 1. JSX语法细节补充
- (1)自动转义
- (2)光标聚焦
- 2. 拆分组件与组件之间的传值
- 3. TodoList代码优化
- 🌠四、围绕React衍生出的思考
- 🌌五、结束语
- ✈️彩蛋
🛰️前言
对于前端而言, react
是前端三大主流框架之一。而在现实生产中,基本上很多大型公司也会偏向于使用 react
,原因在于 react
的 diy
能力比起其他框架也会稍微要更好一些~
紧跟着新技术的步伐,周一也开始学期了 react
。那在下面的文章中,将讲解关于 react
的一些基础知识点,同时呢,也将用 react
来实现一个 TodoList
的功能。
叮咚,开始奇妙的 eract
之旅~🚋
🚀一、react基础
在对 todoList
功能进行设计之前,我们先来了解一点 react
相关的基础知识。
1. react简介
对于 reactjs
来说,需要了解的一些基础知识主要有以下几点:
reactjs
→react native
→react VR
;- 由
Facebook
推出的一款框架,于2013
年开源于社区; react
拥有丰富的函数式编程;react
目前在全球范围内,是使用人数最多的前端框架,同时它拥有健全的文档与完善的社区;React Fiber
是React 16
的版本,它为React
做了很多底层的优化。
2. 开发环境搭建
在进入 react
的基础学习之前,我们首先来搭建 react
的开发环境。对于 react
的环境搭建来说,一般有两种方式,分别是:
- 通过引入
.js
文件来使用React
; - 通过脚手架工具来编码,比如
GRUNT
、Gulp
和webpack
; - 使用
create-react-app
来搭建环境。
那么现在,我们用 create-react-app
来搭建一个 react
项目。具体命令行如下:
npx create-react-app my-app
cd my-app
npm start
3. 工程目录文件简介
初始化完一个项目后,我们来了解下 react
的项目结构。具体如下:
├── public├── favicon.ico 网页icon├── index.html 首页的html模板├── manifest.json 缓存文件
├── src├── App.css ├── App.js 填写组件的内容├── App.test.js 自动化测试文件├── index.css├── index.js 整个程序运行的入口文件├── logo.svg├── registerServiceWorker 借助网页写手机app的功能
├── README.md 项目的说明文件
├── yarn.lock 项目依赖安装包的一些版本号
4. react中最基础的JSX语法
以前我们在写像 <div></div>
这种类似的语法时,一般都是写在 HTML
文件里面。那么,在 react
中,像 <div></div>
这种类型的代码,是在 JS
中去写的。因此,在 js
中写的 html
代码,被称之为 jsx
语法。
值得注意的是,在 react
中使用自己定义的组件时,组件名必须以大写为开头,小写开头在 jsx
中是不支持的,这一点需要稍微注意一下。
所以,一般看到以大写为开头时,比如 <App />
,则说明是我们自己定义的组件。如果是小写为开头时,则一般是原始的 HTML5
标签,如 <div></div>
。
🛸二、使用react编写TodoList功能
1. 页面构思
首先,我们需要先来对页面的内容进行构造。我们在项目的 src
文件夹下创建一个文件,命名为 TodoList
。具体代码如下:
import React, { Component, Fragment } from 'react';class TodoList extends Component {render() {return (<Fragment><div><input /><button></button></div><ul><li>学英语</li><li>Learning React</li></ul></Fragment>)}
}export default TodoList;
此时浏览器的显示效果如下:
2. React中的响应式设计思想和事件绑定
上面我们简单了显示了 todolist
的基本功能,那现在,我们想要实现的是,点击提交按钮,可以把 input
框里面的内容显示在列表下方,这又该怎么处理呢?
如果按照我们正常的思维来想的话,我们可能会觉得,在提交按钮中绑定一个事件,之后呢,当点击绑定按钮时,获取到 input
框的值,进行绑定提交。
但事实上, react
强调的是,我们不要直接操作 DOM
,而是要操作数据。当数据发生变化时, react
会自动地感知到我们数据发生的变化,会自动地帮我们生成 DOM
。
因此,在写 react
时,我们不需要关心 DOM
层面的操作,只需要去关心数据层面的操作即可。
现在,我们先来监听 input
框的值。具体代码如下:
import React, { Component, Fragment } from 'react';class TodoList extends Component {constructor(props) {super(props);this.state = {inputValue: 'hello!!',list: []}}render() {return (<Fragment><div><input value = {this.state.inputValue}onChange = {this.handleInputChange.bind(this)}/><button>提交</button></div><ul><li>学英语</li><li>Learning React</li></ul></Fragment>)}handleInputChange(e) {this.setState({inputValue: e.target.value})}
}export default TodoList;
此时浏览器的打印效果为:
大家可以看到,我们正确的使得 input
框响应到了数据。
那在上面的这段代码中,需要了解的知识点有以下几点。分别是:
state
负责存储组件中的数据;- 如果想要在
html
代码中用一些js
的表达式,那么要记得用{}
进行包裹; - 在进行事件绑定时,记得使用
bind(this)
对事件的作用域进行变更; - 当你想要改变数据项时,不能直接使用
this.state
来改变数据的值,要通过setState
函数来进行改变。
3. 实现TodoList新增删除功能
(1)新增功能
在上面的例子中,我们实现了 input
框中值的获取。那现在,我们要来实现点击提交这个按钮,能够实现对 input
框中值的新增。同样地,是在 TodoList.js
文件下进行修改。具体代码如下:
import React, { Component, Fragment } from 'react';class TodoList extends Component {constructor(props) {super(props);this.state = {inputValue: 'Monday',list: []}}render() {return (<Fragment><div><input value = {this.state.inputValue}onChange = {this.handleInputChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button></div><ul>{this.state.list.map((item, index) => {return <li key={index}>{ item }</li>})}</ul></Fragment>)}handleInputChange(e) {this.setState({inputValue: e.target.value})// console.log(e.target.value)}handleBtnClick() {// ... 展开运算符会将之前的数组进行展开,并生成一个全新的数组// 将input框的值和list的值进行合并形成一个新的数组this.setState({list: [...this.state.list, this.state.inputValue],inputValue: ''})}
}export default TodoList;
此时浏览器的显示效果如下:
在上面的代码中,需要了解的知识点有:
- 我们先在
button
中绑定了handleBtnClick
事件; - 之后通过展开运算符
...
,将数组的内容给合并到list
数组中; - 最后,使用
js
中的map()
方法,将数组列表中的内容给遍历出来。
(2)删除功能
继续,我们来实现删除功能。具体代码如下:
import React, { Component, Fragment } from 'react';class TodoList extends Component {constructor(props) {super(props);this.state = {inputValue: 'Monday',list: []}}render() {return (<Fragment><div><inputvalue={this.state.inputValue}onChange={this.handleInputChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button></div><ul>{this.state.list.map((item, index) => {return (<likey={index}onClick={this.handleItemDelete.bind(this, index)}>{item}</li>)})}</ul></Fragment>)}handleInputChange(e) {this.setState({inputValue: e.target.value})}handleBtnClick() {this.setState({list: [...this.state.list, this.state.inputValue],inputValue: ''})}handleItemDelete(index) {const list = [...this.state.list];list.splice(index, 1);this.setState({list: list})}
}export default TodoList;
在上面的代码中,我们在每一个 <li>
标签下绑定了 handleItemDelete
事件,之后呢,通过传递它的 id
值 index
,同时,配合 splice()
方法,来删除掉掉 list
中具体的内容。
值得注意的是,在 react
中,它是不允许我们对 state
做任何改变的。比如说,我们想要把上面删除代码的逻辑这么写:
handleItemDelete(index) {this.state.list.splice(index, 1);this.setState({list: this.state.list})
}
如果我们直接去操作 this
来改变最后的结果,这会使得函数变得很难用。同时,这种方式在 react
中也是不允许滴!这是应该注意的一个点!
🪐三、对TodoList功能进行进阶操作
1. JSX语法细节补充
(1)自动转义
如果在 jsx
中,我们希望显示一些内容,且这些内容我们希望它自动转义。像下图这样:
大家可以看到,如果不转义时,那么它直接显示除出了 <h1></h1>
标签。但其实我们希望的是,想要把它转义成一级标签的内容。那应该怎么处理呢?
我们就通过 dangerouslySetInnerHTML
这个属性来对 html
进行设置,已达到对 <li>
标签下的内容进行改变,具体代码如下:
<likey={index}onClick={this.handleItemDelete.bind(this, index)}dangerouslySetInnerHTML={{ __html: item }}>
</li>
我们来看下显示效果:
通过对 dangerouslySetInnerHTML
的设置,我们 html
的内容进行了转义。
(2)光标聚焦
在实际的实践中,对于 input
框来说,我们往往会想要点击某个文本,然后让它去聚焦到 input
框中输入内容。那这应该怎么处理呢?
我们继续来改造 jsx
代码。具体代码如下:
render() {return (<Fragment><div><label htmlFor="insertArea">输入内容</label><inputid="insertArea"className="input"value={this.state.inputValue}onChange={this.handleInputChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button></div><ul>{this.state.list.map((item, index) => {return (<likey={index}onClick={this.handleItemDelete.bind(this, index)}dangerouslySetInnerHTML={{ __html: item }}></li>)})}</ul></Fragment>)}
此时浏览器的显示效果为:
大家可以看到,当我们点击输入内容这四个字时,光标就自动地聚焦到 input
框上,并且能够进行自由地输入。那这样的功能是怎么实现的呢?
在上面的代码中,我们可以看到,通过 label
标签和 htmlFor
来对内容进行绑定,以达到最终我们想要实现的效果。
2. 拆分组件与组件之间的传值
在实际的项目中,对于一个大的组件来说,我们总是会对其进行组件拆分。那对于上面这个 todoList
组件来说,也不例外。
我们可以把①输入内容,② input
框 和 ③提交按钮拆分成一个组件。之后呢,把 list
列表拆分成另外一个组件。那接下来我们来对这个组件进行拆分以及父子组件间数据的传递。
首先我们在项目的 src
文件夹下添加一个新的文件。命名为 TodoItem.js
。具体代码如下:
import React, { Component } from 'react';class TodoItem extends Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);}render() {return (<divonClick={this.handleClick}>{this.props.content}</div>)}handleClick() {this.props.deleteItem(this.props.index);}
}export default TodoItem;
现在,我们来改造 TodoList.js
文件。具体代码如下:
import React, { Component, Fragment } from 'react';
import './style.css';
import TodoItem from './TodoItem';class TodoList extends Component {constructor(props) {super(props);this.state = {inputValue: 'Monday',list: []}}render() {return (<Fragment><div><label htmlFor="insertArea">输入内容</label><inputid="insertArea"className="input"value={this.state.inputValue}onChange={this.handleInputChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button></div><ul>{this.state.list.map((item, index) => {return (<div>{/* 父组件将content,index 和 deleteItem 将对应的内容传递给子组件 */}<TodoItemcontent={item}index={index}deleteItem={this.handleItemDelete.bind(this)}/>{/*<likey={index}onClick={this.handleItemDelete.bind(this, index)}dangerouslySetInnerHTML={{ __html: item }}></li>*/}</div>)})}</ul></Fragment>)}handleInputChange(e) {this.setState({inputValue: e.target.value})// console.log(e.target.value)}handleBtnClick() {// ... 展开运算符会将之前的数组进行展开,并生成一个全新的数组// 将input框的值和list的值进行合并形成一个新的数组this.setState({list: [...this.state.list, this.state.inputValue],inputValue: ''})}handleItemDelete(index) {const list = [...this.state.list];list.splice(index, 1);this.setState({list: list})}
}export default TodoList;
就这样,我们对组件进行拆分,达到了与上面未拆分前一样的效果。
那现在,我们来梳理下其中的知识点。主要有以下两个知识点:
- 如何进行组件的拆分
- 父组件向子组件传递值,应该怎么传递
首先,我们创建了一个新的文件 TodoItem
,来存放列表的内容,这是第一点。
其次,有了列表的内容后,我们要来想,父子组件间的数据,怎么传递。那事实上,父组件向子组件传递内容,通过属性的形式来传递。大家看到父组件中 <TodoItem />
的位置,在父组件中,通过 content={item}
这样的形式,来把 item
命名为 content
,并将其传递给子组件。
而对于子组件 <TodoItem />
来说,它将以 this.props
的方式来调用父组件的数据和事件。
3. TodoList代码优化
在上面的代码中,我们对组件进行拆分,以及实现了父子组件间的数据传递。
但细心的小伙伴可能已经发现,代码这么写可能还不够美观。因此,我们来对这两个组件的代码进行优化。
首先是 TodoItem.js
。具体代码如下:
import React, { Component } from 'react';class TodoItem extends Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);}render() {const { content } = this.props;return (<div onClick={this.handleClick}>{/* {this.props.content} */}{content}</div>)}handleClick() {const { deleteItem, index } = this.props;deleteItem(index);}
}export default TodoItem;
我们把 this.props
给单独提取出来,之后再将其放在组件当中使用。同时呢,我们还对 this.handleClick.bind(this)
单独提取出来,这样也使得组件更加美观。
其次,我们来改造 TodoList.js
。具体代码如下:
import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem';
import './style.css';class TodoList extends Component {constructor(props) {super(props);this.state = {inputValue: 'Monday',list: []}this.handleInputChange = this.handleInputChange.bind(this);this.handleBtnClick = this.handleBtnClick.bind(this);this.handleItemDelete = this.handleItemDelete.bind(this);}render() {return (<Fragment><div><label htmlFor="insertArea">输入内容</label><inputid="insertArea"className="input"value={this.state.inputValue}onChange={this.handleInputChange}/><buttononClick={this.handleBtnClick}>提交</button></div><ul>{this.getTodoItem()}</ul></Fragment>)}getTodoItem() {// 父组件将content,index 和 deleteItem 将对应的内容传递给子组件return this.state.list.map((item, index) => {return (< TodoItemkey={index}content={item}index={index}deleteItem={this.handleItemDelete}/>)})}handleInputChange(e) {const value = e.target.value;this.setState(() => ({inputValue: value}));// console.log(e.target.value)}handleBtnClick() {// prevState表示在修改数据之前数据是怎么样的,避免不小心的改变state的状态this.setState((prevState) => ({list: [...prevState.list, prevState.inputValue],inputValue: ''}));}handleItemDelete(index) {this.setState((prevState) => {const list = [...prevState.list];list.splice(index, 1);return { list };});}
}export default TodoList;
同样地,我们先把 handleInputChange
、 handleBtnClick
、 handleItemDelete
这三个事件给抽离出来。
其次呢,我们把 this.state.list.map()
给单独出来形成 getTodoItem()
方法,并使用 {this.getTodoItem()}
进行调用。
最后,我们分别对事件中的 this.setState({})
进行升级改造,将当前所有事件中的所有数据都封装在一个函数内。
🌠四、围绕React衍生出的思考
上面我们基本完成了对 TodoList
功能的开发。那么现在,我们将围绕着我们所学的,来衍生出 react
的一些番外的知识点。具体如下:
- 声明式开发 —— 以前我们在
js
的开发中,都是大量的操作DOM
,这种开发方式称为命令式开发。到现在,我们在使用react
时,基本都是直接操作数据,而不是操作DOM
。那么这样的开发方式,被称为是声明式开发。 - 可以与其他框架并存
- 组件化方式开发
- 单向数据流 —— 在
react
中,父组件允许往子组件传值,但是子组件只能去使用这个值,而不能去改变这个值。 - 视图层框架 —— 只帮助我们解决数据和页面上的内容,并不负责组件间怎么传值,如何传值。
- 函数式编程 —— 当一个函数内容变得多时,可以进行拆分。每一个函数各司其职,使得代码更具有维护性。同时,给前端的自动化测试带来巨大的便捷性。
🌌五、结束语
在上面的文章中,我们学到了关于 react
的一些基础知识。除此之外呢,我们还对 TodoList
进行了基础编写和进阶操作编写。与此同时,我们还围绕 React
衍生出了一些思考。不知道小伙伴们是否对 react
有一些了解了呢?
✈️彩蛋
- 关注公众号星期一研究室,第一时间关注优质文章,更有面试专栏待你解锁~
- 如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😉
- 以上就是本文的全部内容!我们下期见!👋👋👋