react入门笔记

react

https://zh-hans.reactjs.org/

• 是一个用于构建用户界面的 JavaScript 库
• 优点：
  • 声明式
  • 组件化
  • 一次学习随处编写
  • 高效虚拟DOM
  • 兼容性（ie8+）
• 缺点：
  • 更高的学习成本
  • react 不是一个完整框架，不能构建大型应用（可以结合其他库进行开发）
• vue 和其他框架对比https://cn.vuejs.org/v2/guide/comparison.html

使用react

• 1.引入核心库：<script src="./js/react.development.js"></script>
  • 1.2.引入DOM操作相关的：<script src="./js/react-dom.development.js"></script>
• 2.准备容器：<div id="app"></div>
• 3.将内容渲染到容器上：ReactDOM.render("msg",document.getElementById("app"))
  • 渲染页面DOM，
  • @param1 : 渲染内容
  • @param2 : 容器

react虚拟DOM->React.createElement

• React.createElement：接收三个参数，创建一个虚拟DOM对象
  • @param1: 标签类型
  • @param2: 标签属性（对象形式）
  • @param3: 标签内容（可嵌套虚拟dom,可传多个）

let oh = React.createElement("h3",{
   title:"h3",key:1},"title");
let op = React.createElement("p",{
   title:"p",key:2},"msg");
let vd = React.createElement("div",{
   title:"ab"},[oh,op]);

• ReactDOM.render 解析虚拟DOM，输出真实DOM

ReactDOM.render(vd,document.getElementById("app"))

jsx

	<!-- 1.引入核心库 -->
    <script src="./js/react.development.js"></script>
    <!-- 1.2.引入DOM操作相关的 -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 1.3 引入 jsx 解析 -->
    <script src="./js/babel.min.js"></script>

JSX 特点

• 抽象程度高
• 结构清晰
• 增强js语义
• 屏蔽了DOM操作
• 跨平台
• 代码模块化

jsx规范

1. 大括号中可以写各种数据类型
2. js代码写在{ },html建议写( )
3. 不能直接写流程控制语句,可以在函数内写
4. 列表渲染需要带 key
5. jsx 元素具有唯一根节点
6. 注释也要写在{/* */}

基本语法

• script标签的type="text/babel"：声明内部允许使用 jsx 语法
• 使用 jsx 语法创建虚拟DOM
• jsx: 是js 的语法糖， 允许html 和js 混写
• boolean,null,undefined 不渲染
• 可以执行函数
• 数组是单独渲染数组项：[1,2]–>1,2
• 不可以直接访问对象，可以访问对象属性
• 可以执行各种运算符

		let msg = "p标签"
        let arr = [1,2]
        let arr1  = [ <i key="1">1</i>,<b key="2">2</b> ]
        let o ={
   
            name:"小张"
        }
        let vd = (<div>
            <p>{
   msg}</p>
            <p>{
   true}</p>
            <p>{
   null}</p>
            <p>{
   undefined}</p>
            <p>{
   1}</p>
            <p>{
   Math.random()}</p>
            <p>{
   [1,2]}</p>
            <p>{
   arr[0]}</p>
            <p>{
   arr1}</p>
            {
   /*<p>{
   o}</p>*/}
            <p>{
   o.name}</p>
            <p>{
   1+1}</p>
            {
   5>31?<b>b</b>:<i>i</i>}
        </div>);
        ReactDOM.render(vd, document.getElementById("app"))

条件渲染

• 可以通过逻辑运算或者是三目运算实现条件渲染
• 函数调用

 		let score = 91;
        let func = function () {
   
            if (score > 90) {
   
                return <b>高分</b>
            } else {
   
                return <b>普通分</b>
            }
        }
        let vd = (<div>
            {
   func()}
            {
   (function () {
   
                let el;
                if (score > 90) {
   
                   el = <b>高分</b>
                } else {
   
                   el = <b>普通分</b>
                }
                return el;
            })()}
        </div>);
        ReactDOM.render(vd, document.getElementById("app"))

列表渲染

• 列表渲染必须拥有唯一key（一般用map）

 		let arr = ["jack","rose"];
        // 使用 map 方法进行列表渲染
        let arr2 = arr.map((item,index)=>(<li key={index}>{item}</li>))
        console.log(arr2)
        let vd = (<div>
            {
   /* <ul>
                {
   arr2}
            </ul> */}