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都要不一样
- 点击增加列表项
- 数据定义
类似于Vue中script内部的data,React中通过state存放组件的数据,constructor
相当于Vue中的created
,是在组件刚被创建的时候,自动执行的
constructor(props){
super(props);
this.state = {
list: [
'Learn React',
'Write Blog'
],
inputValue: ''
}
}
-
列表项
-
绑定添加事件
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》']
})
}
- 点击删除列表项
将事件绑定在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项目中,增加样式主要有两种方式:
- 标签style里面添加样式对象(使用双重
{}
定义,markdown文章编译不允许双重,所以下面示例写了单层,实际style后面的内容在双层花括号内)
<button style={background: 'yellowgreen', color: 'white'}></button>
- 定义
className
和css
样式文件, 在index.js中import
<button className="add-btn"></button>
逻辑写好了之后,根据我的直女审美又加了点样式,中规中矩的todoList哈哈哈哈哈哈
感兴趣的小伙伴可以移步我的 My Todo-List,源码已经push上去了,开发中存在的问题欢迎大家留言交流~