React学习笔记

1.React 核心概念

• 组件化
• 虚拟DOM
• JSX

2. 起步

• 初始化及安装

  命令行下面 
  yarn init -y
  yarn add react react-dom @babel/standalone

3.JSX

HTML语言直接写在javascript语言中，这就是JSX语法，它允许HTML和JavaScript的混写
https://reactjs.org/docs/jsx-in-depth.html 官方文档

3.1环境配置（JSX需要babel 编译后浏览器才能执行）

• 非模块化环境
  • babel-standalone
  • 执行时编译，速度比较慢，只适用于开发测试环境
• 模块化环境
  • 结合webpack配置babel响应的工具完成预编译

3.2语法基础

• 只能有一个根节点
• 多标签写到一个小括号中，防止JS自动分号，不继续执行
• 遇到HTML标签 就用HTML规则解析
  - 单标签不能省略结束标签
• 遇到代码块，就用JS规则执行
• JSX允许直接在模板中插入一个JS变量
  - 如果这个变量是一个数组，则会展开这个数组的所有成员添加到模板中
• 单标签必须 /> 例如input 标签

3.3在JSX中嵌入JS语法表达式

• 在JSX标签中的注释最好用{/**/} 的语法，保证后面的 } 不会被注释掉
  JSX的注释要用{} 括起来
• 在HTML中绑定语法 用{}

const user = {
           name: 'Jack',
           age: 18,
         gender: 0
         }
         const element = (
         <div>
          <p>{1 + 1}</p>
             <p>{'hello'}</p>
      
            {
            // 不推荐
             // 这是 jsx 和 EcmaScript 6 模板字符串混搭
          }
     
        
           {/*
             * 推荐多行注释，有结尾注释，不会把}给注释掉
              * 这是 jsx 和 EcmaScript 6 模板字符串混搭
           */}
           <p>{`hello ${user.name}`}</p>
           <p>姓名：{user.name}</p>
           <p>年龄：{user.age}</p>
           <p>性别：{user.gender === 0 ? '男' : '女'}</p>
        </div>
       )

3.4 在JS表达式中嵌入JSX

   function getGreeting (user) {
       if (user) {
         return <h1>hello {user.name}</h1>
       }
       return <h1>Hello Stranger</h1>
     }
    const element = getGreeting(null)

3.5 JSX中的节点属性

• 动态绑定属性值 https://reactjs.org/docs/dom-elements.html
  • class使用 classname
  • tabindex 使用tabIndex
  • for 使用htmlFor

 const element = (
      <div className="box" title={user.name}>  这里绑定属性外面不用加双引号
        <div>
        ）

3.6 函数式组件

组件的名字首字母必须大写

3.7 class的基本使用

每一个类中都有一个构造器，如果我们程序员没有手动指定构造器，那么可以认为类中有一个隐形的空构造器，类似与constructor(){} ，构造器的作用就是，每当new这个类的时候，必然会优先执行构造器中的代码

function Student(name,age){
this.name = name
this.age = age
}
//静态属性
Student.info = 'aaa'
//实例方法
Student.prototype.say = function(){
console.log('')
//静态方法
Student.show = function(){

}
}
const s1 = new Student('andy',18)
s1.show()//**访问不到show方法,这个方法不在原型中**
Student.show();  可以访问到

在class 的{}区间内只能写构造器，静态方法，静态属性 实例方法

class Person{
   constructor(name,age){
   //实例属性
       this.name = name
       this.age = age     
   }
   //静态属性
   static info = 'aaadafasd'
   //这是实例方法 挂载到原型对象上
   eat(){
   console.log('这是一个挂载到原型对象上的实例方法'）
   }
   //静态方法,实例访问不到
   static show(){
   console.log(
   }
}

• 构造函数
  - 静态属性：通过构造函数 直接访问到的属性，叫做静态属性
  -
• class类
  - 静态属性：通过static修饰的属性

3.8 class组件语法

在React中推荐使用ES6 Class 的方式定义组件