React学习笔记（持续更新）

1、React介绍：

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

特点

1、采用组件化模式，声明式编码，提高开发效率及组件复用率
2、在React Native中可以使用React语法进行移动端开发
3、使用虚拟DOM和Diff算法，尽量减少与真实DOM的交互

官网及中文文档

https://reactjs.org
https://github.com/facebook/react
https://react.docschina.org/

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

接着我们就可以通过浏览器访问
http://localhost:3000/

项目生成后，默认目录结构包含
public和src两个文件夹 ，其中public里的index.html是整个项目的首页，最终所有的组件内容会挂载到这个页面中；

src下面就是我们编写组件的地方，默认里面有index.js文件，是一个入口文件
项目目录结构

虚拟DOM与真实DOM

1、React提供了一些API来创建一种 “特别” 的一般js对象

const VDOM = React.createElement('xx',{id:'xx'},'xx')

上面创建的就是一个简单的虚拟DOM对象
2、虚拟DOM对象最终都会被React转换为真实的DOM

3、我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。

2、React JSX

Hello World
ReactDom.render()： ReactDOM.render()是react的最基本的方法，是用于将模板转为HTML语言，并插入到指定的DOM节点

ReactDom.render(
   <h1>Hello world!</h1>,
   document.getElementById('root')
)

初识JSX

1、react定义的一种类似于XML的JS扩展语法: JS +XML本质是React.createElement(component, props, …children)方法的语法糖
2、作用: 用来简化创建虚拟DOM

写法：`var ele = <h1>Hello JSX!</h1>`

注意1：它不是字符串, 也不是HTML/XML标签

注意2：它最终产生的就是一个JS对象

3、标签名任意: HTML标签或其它标签

4、标签属性任意: HTML标签属性或其它

5、babel.js的作用

 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

 只要用了JSX，都要加上`type="text/babel"`, 声明需要babel来处理

渲染虚拟DOM(元素)

1、语法: ReactDOM.render(virtualDOM, containerDOM)
2、作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3、参数说明

• 参数一: 纯js或jsx创建的虚拟dom对象
• 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

JSX语法举例：

JSX允许HTML与js混写，但是js一定要用{}包住，并且用return返回HTML;要注意在虚拟的DOM中是不允许要if判读的，可以用三目运算

跟其他JavaScript表达式一样，JSX也是表达式，被React编译后的JSX返回的是普通的JavaScript对象，这意味着你可以类似对待普通JavaScript表达式那样对待一个JSX语句：将它赋值给变量、

将它作为函数参数或返回值等等：

function getGreating (user) {
   if (user) {
      return <h1>hello {formatName(user)}!</h1>
   }
   return <h1>hello world!</h1>
}

Babel会将JSX转换成对react.creatElement()的调用，所以下面两种写法完全等价：

// JSX
const mine = (
   <h1 className="greeting"> 这是我的标题 </h1>
)
// javaScript
const yours = react.creatElement(
   'h1',
   { className: 'greeting ' },
   '这是你的标题'
)

react.createElement()返回的结果是类似下面这样的一个对象：

const element = {
   type: 'h1',
   props: {
      className: 'greeting',
      children: '这是谁的标题'
   }
}

在JSX中嵌入JavaScript表达式

使用花括号{}，可以在JSX中嵌入任意JavaScript表达式：

const element = (
   <h1>
       Hello, {formatName(user)}!
   </h1>
);

在JSX中声明属性

可以在“React元素”上直接声明某个属性。当希望属性值是变量或引用时，在JSX中嵌入JavaScript表达式，使用花括号{}来插入“React元素”的值。

// 简单属性值
const element = <div tabIndex="0"></div>;
// 属性值为变量或引用
const element = <img src={user.avatarUrl}></img>;

注意：JSX中元素的属性名统一使用驼峰写法（camelCase），并且在React的内置元素上，诸如class、for等属性还需要换成className和htmlFor来使用（自定义元素可以正常使用）。

在JSX中声明子元素

如果“React元素”的标签内没有子元素，则可以像在XML中那样使用单标签（包括React内置的HTML元素）。

const element = <img src={user.avatarUrl} />;

如果存在子元素，则就像在HTML中那样直接包裹在父元素中即可（注意换行的JSX要加小括号()）：

const element = (
   <div>
      <h1>Hello!</h1>
      <h2>Good to see you here.</h2>
   </div>
)

JSX语法规则（总结）：

1、定义虚拟DOM时，不要写引号

2、标签中混入js表达式时要用{}

3、样式的类名指定不要用class，要用className

4、内联样式要用style = {{key:value}}的形式去写

5、必须只有一个根标签

6、标签必须闭合

7、标签首字母

（1）若小写字母开头，则将该标签转为html中的同名元素，若html中无该标签对应的同名元素，则报错

（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

3、React组件

下面定义了一个App的组件

//App.js
import React, {Component} from 'react'
class App extends Component {
   render() {
      //JSX 语法
      return (
         <div>hello world!</div>
      ) }
}
export default App

App组件引用和调用

//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from 'App.js'
ReactDOM.render(<App />,document.getElementById('root'))