React 16.4快速上手及TodoList的实现


React Fiber 是React 16之后的框架,之所以称之为Fiber是因为16之后的版本对底层的算法进行了改良,引入了优先级和分片的概念。以开发实际项目为驱动,介绍React开发的特点,最终快速上手呈现一个小型的todoList应用📝

创建项目

安装好node环境之后,依次运行下列代码,创建名为todolist的React项目,并运行

  • npm install -g create-react-app
  • create-react-app todolist
  • cd todlist
  • npm start

react创建项目很慢,因此建议使用淘宝镜像替代默认的npm
npm install -g cnpm --registry=https://registry.npm.taobao.org , 将npm替换成cnpm(淘宝镜像)使得安装速度变快
npm config set registry https://registry.npm.taobao.org , 解决cnpm安装的时候,也会去请求registry.npmjs.ord网站出现的速度变慢,或者报错的问题
验证是否配置成功npm config get registry或者npm info express

实现项目代码的精简化,删除无关的主项目文件的样式文件和默认图片,只保留index.js和App.js
1)在App.js中

import React from 'react';
// 定义一个React组件
class App extends React.Component {
  render() {    
  return (    
  
Hello , Casey Lu!
); }} // 定义完之后要导出,这样在其他地方才可以import export default App;

2)在index.js中,

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(, document.getElementById('root'));
// 把App组件渲染到root标签中

组件

大写字母开头的内容都是组件,引入react理解语法
render()的意义在于可以让我们的一个组件挂载到页面的某个节点上,
App.js即定义一个名为App的组件定义完之后要导出export default App,这样其他才可以import导入这个组件

JSX语法

在React直接使用标签进行定义的语法叫做JSX语法,允许我们直接在代码中使用尖括号的标签结构
具体表现为:

  • 直接使用<div>等html标签定义
  • 使用花括号放JS的表达式,{ 1+2 },显示3

TodoList的实现

在React中数据存储在state中,类似于vue的data, 修改数据时,不能直接对state的数据进行push,而是使用setState配合ES6的语法,li中的每一个key都要不一样

  1. 点击增加列表项
  • 数据定义
    类似于Vue中script内部的data,React中通过state存放组件的数据,constructor相当于Vue中的created,是在组件刚被创建的时候,自动执行的
constructor(props){
  super(props);
  this.state = {
    list: [
      'Learn React',
      'Write Blog'
    ],
    inputValue: ''
  }
}
  • 列表项
    List列表项内容

  • 绑定添加事件
    button上面绑定事件使用onClick,示例:<button onClick={this.addList.bind(this)}>add</button>
    📝使用bind改变this的指向,否则在addList方法中无法通过this.state访问本组件中的数据)

由于React也是基于MVVM的,所以在事件中并非对DOM进行操作,而是通过改变数据,进而影响组件的视图

addList(){
  this.setState({
    list: [...this.state.list, 'Dance 《Yes!Ok》']
  })
}
  1. 点击删除列表项

将事件绑定在li标签上,监听onClick事件,根据index删除对应的item

deleteList(idx){
  const list = [...this.state.list];
  list.splice(idx,1);
  this.setState({list});
}

React组件的拆分

同样基于TodoList的项目,将每一个列表项作为一个组件,不是一个li标签

父子组件之间的传值:

  • 父 → 子:父组件通过属性的方式传送,子组件通过props的方式接收
    父:content = {item},子:{this.props.content}
  • 子 → 父:子组件需要调用父组件传递过来的方法,进行传值和参数调用
    父:delete={this.handleDelete} ,子 :this.props.handleDelete(this.props.index)

代码优化

把函数调用的bind(this)迁移到constructor里面简化render()里面的代码,绑定事件时直接使用方法即可

constructor(){
  this.handleInputChange = this.handleInputChange.bind(this);
}

render()内部的渲染结构很复杂的时候,可以写一个单独的方法进行渲染,render内部就可以直接调用该方法

getTodoItems() {
  return (
    ...
  )
}

CSS样式

在React项目中,增加样式主要有两种方式:

  1. 标签style里面添加样式对象(使用双重{}定义,markdown文章编译不允许双重,所以下面示例写了单层,实际style后面的内容在双层花括号内)
    <button style={background: 'yellowgreen', color: 'white'}></button>
  2. 定义classNamecss 样式文件, 在index.js中import
    <button className="add-btn"></button>

逻辑写好了之后,根据我的直女审美又加了点样式,中规中矩的todoList哈哈哈哈哈哈

My todoList最终实现效果

感兴趣的小伙伴可以移步我的 My Todo-List,源码已经push上去了,开发中存在的问题欢迎大家留言交流~😄


Author: Casey Lu
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Casey Lu !
评论
 Previous
常见反爬虫策略的探究 常见反爬虫策略的探究
上周末百度三面面试官问的一个我最感兴趣的问题莫过于“对于淘宝京东之类的电商网站,防止商品价格被爬取,你会有哪些设计思路 ”在此之前,cc只是会通过代理IP手段来绕过一些反爬虫设置进行网站爬虫,但是没有思考过这样具体的应用场景。这篇Blog将
2020-04-15
Next 
React的虚拟DOM和Diff算法 React的虚拟DOM和Diff算法
React系列笔记之二 了解React的核心概念对于React的学习至关重要,这一篇详细介绍虚拟DOM和Diff算法。 虚拟DOM(Virtual Document Object Model) Dom的本质: 浏览器中的概念,用JS对象表示
2020-04-13
  TOC