React 16.8.6 学习笔记【2】【react & react-dom &jsx】

React 学习笔记 【react & react-dom & jsx】

react【渐进式框架】

一种最流行的框架设计思想，一般框架中都包含了很多内容，这样导致框架的体积过于臃肿，拖慢加载的速度。真实项目中，我们使用一个框架，不一定用到所有的功能，此时我们应该把框架的功能进行拆分，用户想用什么，让其自己自由组合即可。

全家桶：渐进式框架N多部分的组合
VUE全家桶：vue-cli/vue/vue-router/vuex/axios(fetch)/vue element
REACT全家桶：create-react-app/react/react-dom/react-router/redux/react-redux/axios/ant/dva/saga/mobx…

react【核心部分】

React框架的核心部分，提供了Component类可以供我们进行组件开发，提供了钩子函数（生命周期函数：所有的生命周期函数都是基于回调函数完成的）

react-dom

把JSX语法（react独有的语法）渲染为真实DOM（能够放到页面中展示的结构都叫做真实的DOM）的组件

react是页面所有的东西（css，img）全部放到js中，通过webpack编译放到页面该放的位置。

JSX（虚拟dom）语法

jsx是什么（javascript+xml） react 独有语法
jsx和我们之前自己拼接的HTML字符串类似，都是把HTML结构代码和JS代码混合在一起，但是他不是字符串。

注意事项：
1，不建议把jsx直接渲染到body中，而是放在自己的容器中，一般我们都放在一个容器id为root的div中；
2，在jsx中出现{ }是存放的js代码，但是要求js代码执行有返回结果；
->不能直接放一个对象数据类型的值：数组（数组中没有对象，是基本元素或者jsx元素除外），对象，函数；
->可以是基本类型的值：布尔类型，null，undefined 不会报错，也不会显示；
->循环，判断语句都不支持（三元表达式除外）

3，循环创建jsx元素（一般都是基于数组的map方法完成迭代），需要给创建的元素设置唯一的key值；
4，只能出现一个根元素；
5，给元素设置样式类名的时候使用className 而不是class；
6，style中不能直接写样式字符串，需要基于一个样式对象来遍历赋值。例如：{{color:‘red’,fontSize:20px}}

//如下是一段简单的例子，前提条件是在create-react-app 脚手架环境下

import React from 'react';
import ReactDom from 'react-dom';

// ReactDom.render([jsx],[container],[callback]);
/** reactdom 渲染函数render 有三个参数，
*1，jsx： react的虚拟dom
*2，container：容器，我们想把jsx元素放到哪一个容器中
*3，callback：当内容渲染完成之后的回调函数
**/
let root =document.querySelector("#root")，
    data = '开始学习react了'
ReactDom.render(<div id="box">HELLO WORD! {data}<div/>,root,()=>{
        console.log('ok')
    })；
    
//这样就把id为box的div渲染到了id为root的盒子中了，
//{ } 中的data就是一个js表达式
//页面中最终结果是：HELLO WORD ! 开始学习react了