react入门学习及总结

不知不觉一年又过去了，新的一年又到来，2019应该要好好思考，好好学点有用的东西，规划下自己今后的学习方向，不要再像以前那样感觉很迷茫。

react简单介绍

官网及中文文档
https://reactjs.org
https://github.com/facebook/react
https://react.docschina.org/

和vue一样，react是一个用于构建用户界面的 JavaScript 库,起初只是Facebook的一个内部项目，用来架设 Instagram 的网站，后于2013年5月开源

特点
1、使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
2、性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新

核心概念
1、虚拟DOM（Virtual DOM）
2、Diff算法（虚拟DOM的加速器，提升React性能的法宝）

create-react-app安装

像vue-cli一样，官方为我们提供了一个create-react-app脚手架，通过脚手架安装，无需再配置webpack相关东西。
详情可以查看create-react-app文档

全局安装
npm install -g create-react-app
创建项目
create-react-app hello-react

创建完成之后
cd hello-react
npm start
接着我们就可以通过浏览器访问
:3000/

项目生成后，默认目录结构包含
public和src两个文件夹 ，其中public里的index.html是整个项目的首页，最终所有的组件内容会挂载到这个页面中；
src下面就是我们编写组件的地方，默认里面有index.js文件，是一个入口文件

除了npm start命令之外

默认还为我们提供了以下命令
npm run build 用于生产环境编译打包
npm test 测试
npm run eject 这个是用来显示默认的配置文件，实现自定义的配置修改，如webpack相关的配置，这个命令属于单向操作，一旦使用，就不能恢复了。

第一个react程序 class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage />, mountNode );

上面这段代码就是react的基本写法，使用的是jsx语法，跟vue区别挺大的，推崇用js的方式去编写html和样式。

下面简单对react组件的用法做一下演示

我们在src目录下建立一个components文件夹

并创建c1，c2,c3三个js文件

我们在入口文件index.js中添加以下内容

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import C1 from './components/C1.js'; import C2 from './components/C2.js'; ReactDOM.render( <div> <C1/><App /><C2/> </div> , document.getElementById('root'));

在c1.js文件中复制下面的代码

import React, { Component } from 'react'; import './C1.css'; class C1 extends Component { render() { return (     <div className="c1"> c1     </div>     ); } } export default C1;

c2.js一样，也是添加以上代码，修改对应的名字就行。

然后在app.js中添加如下代码

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import C3 from './components/C3.js'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> hello </header> <C3/> </div> ); } } export default App;

可与看到我们在app.js中使用了c3组件，这里属于是一个嵌套组件，因为app.js也是一个组件在
index.js中使用

最终的效果就是c1,c2,app及app嵌套组件c3中的内容按照顺序被展示出来了

通过以上内容，我们大致熟悉了react中组件的写法方式，接下来我们来做一个todolist小项目

todolist项目

我们还是使用create-react-app来创建一个名为todolist-react的项目
在src下面建立components文件夹，并添加
appform,applist,apptabs,apptodos这四个js文件，index.js依然作为我们的项目入口文件

添加以下几条默认数据传递到App容器组件中

let data = [ {id: 0, text: '吃饭唱歌打豆豆1', complete: false}, {id: 1, text: '吃饭唱歌打豆豆2', complete: false}, {id: 2, text: '吃饭唱歌打豆豆3', complete: true}, ] ReactDOM.render(<App data={data}/>, document.getElementById('root'));

在app.js文件中

state = { choosevalue : 1,//筛选 1全部 2未完成 3已完成 data: this.props.data }

state作为数据管理，添加data熟悉并使用this.props.data获取到父组件data列表数据

在render函数中通过data属性传入到applist组件中

render() { const { data } = this.state; return ( <div className="App"> <AppForm AddTodoItem={this.OnAddTodoItem.bind(this)} /> <AppTabs SubmitChooseValue={this.ChooseValue.bind(this)}/> <AppList data={this.state.data} choosevalue={this.state.choosevalue} ChangeCompleteTop={this.AllChangeComplete.bind(this)} DeleteItemTop={this.AllOnDeleteItem.bind(this)}/> </div> ); }

然后，在我们的applist中对data进行遍历将值赋给每一个item项，AppTodos作为嵌套组件将id, text, complete以及index值传递过去

{this.props.data.map(({ id, text, complete }, index) => ( <AppTodos key={index} id={id} text={text} complete={complete}/> ))}