React(1)

1. 概述

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

1.1 React 特点

  • 1.声明式设计 −React采用声明范式，可以轻松描述应用。
  • 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
  • 3.灵活 −React可以与已知的库或框架很好地配合。
  • 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
  • 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
  • 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

1.2 安装

  • 使用 create-react-app 快速构建 React 开发环境

（create-react-app 自动创建的项目是基于 Webpack + ES6 ）

执行以下命令创建项目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

2. 创建虚拟DOM的两种方式

2.1 JSX创建虚拟DOM

<body>
    <div id="text"></div>
    <script type="text/babel"> 
        const VDOM = <h1> Hello React</h1>
        ReactDom.render(VDOM,document.getElementById('test'))
    </script>
</body>

2.2 JS创建虚拟DOM

<body>
    <div id="text"></div>
    <script type="text/babel"> 
        const VDOM = React.createElement('h1',{id:'title'},'Hello React')
        ReactDom.render(VDOM,document.getElementById('test'))
    </script>
</body>

2.3 JSX好处

  • 更容易编写React组件，因为可以使用HTML标签来描述组件的结构和样式。
  • 可以添加注释，使代码更易于理解和维护。
  • 可以在JavaScript代码中直接操作DOM元素，而不需要通过浏览器渲染页面。

JSX会被翻译成JS，只是JS的语法糖

2.4 虚拟DOM与真实DOM

虚拟DOM

  • 本质是Object类型的一般对象
  • 虚拟DOM比较轻，真实DOM比较重
  • 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

3. JSX语法规则

  1. 定义虚拟DOM时，不要写引号
const VDOM = <h1> Hello React</h1>
const VDOM = "<h1> Hello React</h1>"   //加引号变成字符串
  1. 标签中混入JS表达式 [会产生一个存在或不存在的值] 时要用 { } 
const myId = 'TITle'
const myData = 'Hello React'
const VDOM = (
    <h1 id={myId.toLowerCase()}> 
        <span>{myData}</span>
    </h1>
)
  1. 样式的类名指定不能用class，用className
const VDOM = (
    <h1 className="title"> 
        <span>hello</span>
    </h1>
)
  1. 内联样式要用style={{ key: value }}的形式去写
const VDOM = (
    <h1 style = {{color:'white',fontSize:'29px'}}> 
        <span>hello</span>
    </h1>
)
  1. 只能有一个根标签
const VDOM =(
    <div>
        <div></div>
        <div></div>
    </div>
) 

//多个根标签报错
const VDOM =(
    <div></div>
    <div></div>
)
  1. 所有标签必须闭合
const VDOM = (
    <input type="text"></input>
)

const VDOM = (
    <input type="text" />
)
  1. 标签首字母
    1. 若小写字母开头，则将标签转为html中同名元素，html中无对应元素报错
    2. 若大写字母开头，react就把该标签渲染为组件，组件未定义则报错
//会被识别为组件
const VDOM = (
    <Hello></Hello>
)
//会被识别为html标签,找不到对应标签报错
const VDOM = (
    <good></good>
)

eg

const data = [1,2,3,4]
const VDOM = {
    <div>
        <ul>
            {
                data.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })
            }
        </ul>
    </div>
}

4. 组件与模块

4.1 函数式组件

  • 适用于简单组件的定义
<div id="test"></div>
<script type = 'text/babel'>
    <!-- 创建函数式组件 -->
    function MyComponent(){
        return <h2>我是用函数定义的组件</h2>
    }
    //渲染组件到页面，注意首字母大写，小写会被当做html标签
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))
</script>

4.2 类式组件

类

  • 类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
  • 如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的
  • 类中所定义的方法，都是放在了类的原型对象上。供实例去使用
<script type = 'text/javascript'>
        //创建一个Person类
        class Person {
            //构造器方法
            constructor(name, age) {
                console.log(this);//构造器中的this是，类的实例对象（new是谁就是谁）
                this.name = name
                this.age = age
            }
            //一般方法
            speak() {
                //spack方法放在了哪里？--类的原型对象上，供实例使用
                console.log(this);
                //通过Person实例调用speak时，speak中的this就是Person实例
                console.log(`我叫${this.name},我的年龄是${this.age}`)
            }
        }
        // 创建一个Person的实例对象
        const p1 = new Person('tom', 18)
        const p2 = new Person('jack', 19)
        p1.speak()
        p2.speak()
 
   
</script>

继承

class Student extends Person {
    constructor(name, age, grade) {
        super(name, age)
        this.grade = grade 
    }
    //重写从父类继承过来的方法
    speak() {
        console.log(`我叫${this.name},我的年龄是${this.age}，我的班级是${this.grade}`)
    }
    //一般方法
    study() {
        //study方法放在了哪里？类的原型对象上，供实例使用
        console.log("我爱学习")
    }
}

const s1 = new Student('tina', 20,'5年级')
console.log(s1);
s1.speak()

类式组件(简单)

  • 必须继承React.Component
  • 必须有render，且render必须有返回值
<script type = 'text/javascript'>
    //1.创建类式组件
    class MyComponent extends React.Component{
        //render放在哪？--MyComponent的原型对象上，供实例使用
    //render中的this是谁？--MyComponent的实例对象
        render(){
            return  <h2>我是类定义的组件</h2>
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test")
    //  执行了ReactDOM.render(<MyComponent/>,document.getElementById("test")后
    //  1.React解析组件标签，找到了Mycomponent组件
    //  2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
    //  3.将render返回的虚拟DOM转为真实DOM，随后呈现到页面中
</script>

5. state

  • state最好写成对象
<script type = 'text/javascript'>
   //1.创建类式组件
   class MyComponent extends React.Component{
       constructor(props){
     super(props)
     this.state = {isHot:true}
   }
       render(){
     //读取state
     const {isHot} = this.state
           return  <h2>今天的天气很{isHot?'炎热:凉爽'}</h2>
       }
   }
   //2.渲染组件到页面
   ReactDOM.render(<MyComponent/>,document.getElementById("test")
   
</script>

6. 事件绑定

原生事件绑定

<button id="btn1"> 按钮1 </button>
<button id="btn2"> 按钮2 </button>
<button onclick = "click()"> 按钮3 </button>
<script type = 'text/javascript'>
    const btn1 = document.getElementById('btn1')
  btn1.addEventListener('click',()=>{
    alert('按钮1被点击')
  })
  
  const btn2 = document.getElementById('btn2')
  btn2.onclick = ()=>{
     alert('按钮2被点击')
  }
    
  function demo(){
    alert('按钮3被点击')
  }
</script>

react事件绑定

  • 把原生的onclick换成onClick
  • 方法外不能加引号
  • 方法不能加括号
<script type = 'text/javascript'>
    //1.创建类式组件
    class MyComponent extends React.Component{
        constructor(props){
      super(props)
      this.state = {isHot:true}
    }
        render(){
      //读取state
      const {isHot} = this.state
            return  <h2 onClick={demo}>今天的天气很{isHot?'炎热:凉爽'}</h2>
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test")
    
  function demo(){
    console.log('标题被点击')
  }
</script>

1

<script type = 'text/javascript'>
    //1.创建类式组件
    class Weather extends React.Component{
        constructor(props){
      super(props)
      this.state = {isHot:true}
    }
        render(){
      //读取state
      const {isHot} = this.state
            return  <h2 onClick={changeWeather}>今天的天气很{isHot?'炎热:凉爽'}</h2>
        }
    changeWeather(){
        
    }
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test")
    
  
</script>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,063评论 6赞 510
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,805评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,403评论 0赞 357
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,110评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,130评论 6赞 395
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,877评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,533评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,429评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,947评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,078评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,204评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,894评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,546评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,086评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,195评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,519评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,198评论 2赞 357

推荐阅读更多精彩内容