React 基础知识

React使用了响应式渲染，将状态从展现给用户的UI中分离出来。它超越了数据绑定，克服了其缺陷并且在使用上更加容易。它用一种声明的方式来定义组件的外观和行为，当数据发生变化时，React会在概念上重新渲染整个用户界面。（这里就引入了虚拟DOM的概念）

在一个React应用中，一切都由组件组成。组件就是应用 程序中的自包含的，关注特定用途的基础构件。比使用模板有巨大的好处。

一个React组件就是一个带有render的方法，并且返回组件UI描述的JavaScript类

正规的开发流程：

• 编写JSX并随时将它转换成标准的JavaScript代码

• 使用模块化模式编写代码

• 管理依赖性

• 打包多个JavaScript文件并使用source maps进行调用

项目的基础结构

• 一个source文件夹，包含了所有的JavaScript模块

• 一个index.html，几乎是一个空页面，只是用来加载应用程序的JavaScript，并提供一个div来让React在该元素中渲染出应用程序的组件

• 一个package.json文件，它是一个独立的npm清单文件

• 一个模块打包或build工具，用来实现JSX转换和模块/依赖项打包。比如webpack

the sample code to let user create a project quickly
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

部署的时候使用

npm run build

上面的命令可以完成所有初始化工作，但是具体的步骤可以分为

1. 在终端上运行npm init 生成package.json

2. index.html中使用boudle.js 它是react编译的标准输出

3. 配置webpack.config.js

4. 在package.json中创建启动本地服务的命令

第一个React组件

• import React

• extends React.Component

• 实现render() 方法，在方法里return JSX语句

技巧：可以使用解构赋值来直接访问模块内部的函数和类，类似于python的from * import *

import React, { Component } from 'react';

在React中使用js，可以在React的component中直接写js的代码，

• 不过要在render的函数中写，而不能写到return语句中。

• 可以使用 {}，在{}中的值被被当作一个JS表达式进行求值，并被渲染到HTML标记中

将组建组合起来：React的好处就是可以创建简单的可重用的组件，然后通过将组进行嵌套和组合来创建复杂的UI

props是React中的一种从父组件向子组件传输数据的饿机制，

• 它们在子组件中不能被修改

• props由父组件传输，也由父组件拥有

• 接收props的组件（子组件）是无法改变props的值的。

子组件通过props可以获取到从父组件通过<* a=”b”>这样语法传给子组件的值

组件的常用函数：

• render()

• constructor()

定义组件的层级关系

1. 每个组件都应当小巧且只关注单个功能

2. 分析项目的外观框架和布局

3. 每个组件创建为一个单独的JavaScript文件，但是有点要注意就是每个文件要加上export default GroceryList;

State 一种可以体现状态的可变数据

• 调用方式是this.state

• 对于组件是私有的，通过 this.setState()来进行修改。

• 当state被修改时，组件会触发响应式渲染，此时组件和其子组件都会被重新渲染。

可以在任何时刻为组件添加state，比如在constructor中

组件可以使用constructor()来进行初始化

react中的事件

回调函数的作用域是组件，需要显示的将函数绑定到上下文中

this.onClickButton = this.onClickButton.bind(this)

对内联样式友好，可以使用组件的方式来定义样式

const counterStyle = {
    margin: "16px"
}
return(
<div style={counterStyle}>

一个包含值和一选定属性的表单组件称为受控组件在一个受控组件中元素内部所有渲染的值将一直反应属性的纸。

非受控组件不设置value属性，任何用户输入都会立刻反应到渲染后的元素上。

key特性,他是一个唯一标识符允许你在需要进行插入，删除，替换和移动操作时。快速找到元素。创建组建时需要为每一个子元素提供一个key.可以是 任何静态且唯一的值

当需要操作真实DOM时，可以使用refs

类构造函数属性，如果初始化时没有被满足，就会打印出警告信息

propTypes校验器，可以用来校验初始化时传入的值。

有状态的组件和单纯组件

让一个应用程序的大部分组件都是无状态的单纯组价是一个最佳实践