可能由于vue和小程序的文档和教程非常多，最近的几个项目尝试用vue和小程序都还做的不错，不过一直对react也比较好奇，听说react语法是all in js，所以想了解一下，正好慕课网dellLee老师出了一套课程React开发简书项目_从零基础入门到实战，于是整理一些react.js的基本内容，希望能帮助到大家也能帮助到自己。
开发环境准备
基于npm环境进行安装，首先需要下载node，接触过vue的小伙伴肯定不陌生，node安装包传送门，可以自行下载。
点击查看react中文文档
首次安装可根据如下操作来进行
// 全局安装create-react-app脚手架
npm install -g create-react-app
// 通过脚手架创建todolist项目
create-react-app todolist
// 进入项目todolist
cd todolist
// 运行项目
npm run start
Hello World
利用react敲开新世界的大门hello world，看如下代码：
import React {Component} from 'react'
class App extends Component {
render() {
return (
<div>Hello World</div>
)
}
}
export default App
不同于传统写法，react提倡的是all in js，所以基本所有模块的开发都是在js文件中来执行的。看上面的代码，引用了ES6的概念用class定义了一个叫App的类，它继承自React.Componet，当一个类继承React.Component这个类的时候，它就是一个组件了。最后通过export default将这个组件导出，然后我们在其它文件中想引用这个App组件在头部通过import引入即可。React中自定义的组件首字母一般会大写，而原生html标签首字母一般不会大写。
什么是jsx语法
传统写网页方式如果我们去写html标签，一般都会在.html文件里面去写，而React中我们将html标签写在了.js文件中，而在js中去写这些标签，我们在React中就把它称为jsx语法。传统的js中如果我们使用html标签需要用拼接字符串的方式，如：
<script>
var ele = "<div class='name'></div>"
</script>
而在React中，使用jsx语法可以完全避免这些累赘的字符串拼接。
import React {Component} from 'react'
class App extends Component {
render() {
return (
<div className="name">
Hello World
</div>
)
}
}
export default App
还是用上面的例子，我们可以直接在render()函数中通过return()里面去写html标签和自己定义的组件标签(自己定义的组件首字母一定要大写)，此处关于class我们引用的是className。因为class属性和ES6中class类的定义可能会有冲突，本身jsx语法更多的特性就是接近javascript而不是html，所有React Dom使用的是驼峰命名的方式来定义属性的名称。
通过React编写todoList功能
通过一个小功能我们来了解react的基本语法
首先我们看下通过脚手架给我们生成之后的目录结构(删除掉了很多冗余的代码文件)，如下图所示：
一般我们只用关心public文件夹和src文件夹里面的内容，重点是src文件夹。这里我们看下src中包含index.js、style.css、TodoList.js三个文件(TodoItem.js我们先不看)。index.js作为程序的入口文件，我们可以看些里面的代码结构：
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
ReactDOM.render(<TodoList />, document.getElementById('root'));
这里引用了TodoList组件，然后将组件挂载在了root这个DOM下面。主体功能实现都在TodoList.js文件，下面我们来看下TodoList.js
import React, { Component, Fragment } from 'react'
classTodoList extends Component {
constructor(props) {
super(props)
// 定义页面所需要的初始数据
this.state = {
inputValue: '',
list: []
}
}
render() {
return (
<Fragment>
<div>
<label htmlFor="insertArea">输入内容</label>
<input
className = "input"
id = "insertArea"
value = {this.state.inputValue}
onChange = {this.handleInputChang.bind(this)}
/>
<button onClick={this.handleBtnClick.bind(this)}>提交</button>
</div>
<ul>
{
this.state.list.map((item, index) => {
return (
<li
key={index}
onClick={this.handleItemDelete.bind(this, index)}
dangerouslySetInnerHTML = {{__html: item}}
>
</li>
)
})
}
</ul>
</Fragment>
)
}
handleInputChang(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
我们来分析下如上代码：constructor()中定义了this.state这个对象，用于给jsx语法中实现数据绑定。render()中我们写了页面的结构，在input中使用onChange监听input的改变(原生事件都通过驼峰的方式来进行如onChange，onClick等)，这里区别于小程序和vue，value = this.state.inputValue onChange = {this.handleInputChange.bind(this)}this.state.inputValue就是读的constructor()中定义了this.state这个对象中的数据，this.handleInputChange.bind(this)就是调用下面的handleInputChange()方法，这里绑定了bind(this)用于改变事件执行时this的指向。下面的函数中更新数据的方式更类似于小程序中this.setData这种，这里是使用的this.setState来进行数据的更新。通过上面的一段代码我们就可以完成简单的TodoList功能。这里我们还没有用组件的方式来进行父子组件传递，当然代码也可以更好的优化，我们可以将ul里面的代码进行封装，并将li里面的代码单独组件化来引用。同时在react.js16.3以后的版本中数据更新的方式也发生了很大改变，官方更推荐使用return关键字来返回新的数据。详细代码可以看我的github：react实现TodoList功能。
关于React基础总结
-
声明式开发
传统的网页开发都是直接操作Dom(如Jquery)我们将其称为命令式编程，而所谓声明式开发更多的是面向数据来开发，根据数据来构建DOM，像当下流行的react、vue等都属于声明式编程
-
可与其它框架并存
我们使用react开发可以发现在index.js中有一段如下代码：
ReactDOM.render(<TodoList />, document.getElementById('root'));
这代表我们写的TodoList这个组件式挂载在root这个dom节点下面的，所以如果我们在写一个demo这个节点，然后在demo这个节点中用jquery或者vue进行开发，两者都不会被互相影响到。
-
组件化
页面可以分成很多块，每一块代表一个组件，然后通过组件的方式拼凑起来整个页面，方便了网站的维护。
-
单向数据流
react中父组件可以向子组件传递数据，而子组件不能直接修改父组件state里面的数据，只能通过调用父组件自己的方法让父组件自己去修改自己的数据。
-
视图层框架
其实我们在用react.js来开发的时候，如果组件树非常茂盛，如果子孙组件如果要调用爷爷辈的数据，传统模式可能需要一层一层的进行数据传递，导致代码冗余加载慢，所以衍生了redux等数据传递框架来辅助react.s进行数据交互，所以react.js更多的是完成界面结构的开发，真正的数据交互传递可能更多依赖于第三方库。
-
函数式编程
因为React.js是一种
all in js的编程，所以它的代码都是在js文件中来实现的，也就是说它的主要代码都是通过函数方法的方式来编写的，这就给前端自动化测试带来了极大的便利。
关于React入门暂时先总结这么多，后续还会继续记录和学习，因为刚刚起步，如有错误或不严谨的地方，请务必给予指正！
网友评论