react

1- react的介绍

• react是facebook团队开发和维护的一个前端框架

• React 可用于创建 Web 用户交互界面。

• React 不是一个完整的 MVC 框架,最多可以认为是 MVC 中的 V（View）

• React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。

• React 引入了虚拟 DOM（Virtual DOM）的机制。

• React 引入了组件化的思想。

• React 使用 Facebook 专门为其开发的一套语法糖--JSX。

react优点

• React 速度很快

• 一切皆是组件

• 单向数据流

• 同构、纯粹的 javascript

• 兼容性好

react缺点

• React 不适合做一个完整的框架。

• React 并不是一个完整的框架，它只实现了 MVC 模式中的 V(View)层。如果构建大型项

  目需要一套完整的框架，基本都需要加上 ReactRouter 和 Flux 才能写大型应用。

2- 脚手架安装和使用

2-1 安装脚手架

只需安装一次

npm i create-react-app -g

2-2 创建项目

create-react-app 项目名

2-3 启动项目

• 默认启动在3000端口

npm start

• 修改启动的端口 package.json

 "start": "set port=3333 && react-scripts start",

2-4 项目目录

my-demo
    node_modules   相关依赖
    public      资源文件
        index.html   主页面
        ...  其他相关文件
    src     存放源代码
        index.js   主入口文件
        index.css   主样式文件
        app.js    根组件
        app.css   根组件样式
    .gitignore    忽略文件
    package.json    配置文件
    lock        配置文件

2-5 项目清空

3- react语法

安装react语法提示

• ES7 React/Redux/GraphQL/React-Native snippets

• 设置--> emmet---> 添加一个键值对 "javascript": "javascriptreact"

jsx语法:

• js+xml

• js代码中可以混合xml代码

• xml是严格模式,必须有结束标签

3-1 注释语法

 {/* 注释语法 */}

3-2 数据绑定

 <h1>app组件标题</h1>
      {/* {} 模板语法 */}
      {/* 解析变量 */}
      <h2>学生姓名: {name} </h2>
      {/* 支持简单的运算符 */}
      <h3>{3+2}</h3>
      {/* 支持方法 */}
      <h3>{str.toUpperCase()}</h3>

3-3 属性绑定

 {/* 属性绑定 */}
 <img src={imgSrc} alt="" />

3-4 条件渲染

 {/* 显示一个按钮,如果flg=true  显示确定按钮,否则显示取消的按钮 */}
      {flg?<button>确定</button>:<button>取消</button>}
      
      {2==2?a:b}
​
      {flg?<p>条件成立</p>:null}

3-5 循环渲染

• 必须要添加key,唯一的索引

 {/* 循环渲染 */}
      <ul>
        {/* <li>{arr[0]}</li> */}
​
        {/*循环是一定要有key,  主要是虚拟dom渲染,更新是diff算法 */}
        {arr.map(item => {
          return (<li key={item}>{item}</li>)
        })}
      </ul>

3-6 class 绑定

class--->className

{/* class 属性 */}
      <h1 className='tit1'>app组件标题</h1>
      {/* 根据条件添加类名 */}
      <h1 className={flg?'tit1':'tit'}>app组件标题</h1>

3-7 style

属性值需要是一个对象

 {/* style 属性需要是一个对象 */}
​
​
let obj = {
    color:'red',
    fontSize:'12px'
  }
​
      <h2 style={obj}>学生姓名: {name} </h2>
​
      <h2 style={{color:'red',fontSize:'12px'}}>学生姓名: {name} </h2>

4- 组件

• 组件严格区分大小写

• 组件名必须大写字母开头

• 不需要转换驼峰式命名

• 组件只需引入,即可调用

• 组件文件的后缀名 .js/.jsx

4-1 函数组件

- 函数组件的声明

// 函数组件
​
// 引入组件的样式
import './Header.css'
​
function Header(){
    let val='header组件的数据'
    // return 的就是当前组件的结构
    return (
        <div className='header'>
            <h1>header组件--函数组件声明</h1>
            <h2>{val}</h2>
        </div>
    )
}
​
// 导出
export default Header

- 组件的调用

//引入
import Header from './Header.jsx'
//调用
<Header></Header>

4-2 类组件声明

// 列组件的定义

import React,{Component} from 'react'

import './Father.css'
// 类组件的声明
class Father extends Component{

    name='小明'
    
    // 渲染方法
    render(){
        console.log(this);
        // 返回当前组件
        return (
            <div className='father'>
                <h2>这是父组件-father</h2>
                <h1>{this.name}</h1>
            </div>
        )
    }

}

export default Father

4-3 区别

• 函数组件不可以定义很多方法,类组件可以的

• 类组件有生命周期,函数组件没有声明周期

• 类组件有状态(state数据)的,函数组件没有状态(state)

• 函数组件性能较好,类组件实际上是有一个实例化的过程

5- 事件处理

5-1 事件绑定

on+事件名='处理方法'

• 不带()

  class Main extends Component{
  
      // 打印
      log(){
         console.log('111111') 
      }
      log1(){
         console.log('222222') 
      }
      {/* 绑定时不加() */}
       <h1 onClick={this.log.bind(this)}>main组件</h1>

• 带()

  {/* 绑定时加() */}
   <h1 onClick={()=>this.log1()}>main组件</h1>

5-2 事件传参

• 不带()

   {/* 事件传参 */}
    {/* 不带(), 传参需要在bind(this,实参1)方法中传递 */}
   <button onClick={this.fn.bind(this,'确定')}>确定</button>       

• 带()

  {/* 带() */}
  <button onClick={()=>this.fn('取消')}>取消</button>

5-3 事件对象

• 不带()

    {/* 事件对象获取 */}
  {/* 不带(), 默认接收一个形参(代表事件对象) */}
  <button onClick={this.myevent.bind(this)}>按钮1</button>

• 带()

  {/* 带(),需要传递事件对象*/}
   <button onClick={(e)=>this.myevent(e)}>按钮2</button>
   
  fucntion(e){
   	return this.myevent(e)
   }

5-4 阻止事件冒泡

box(e){
        console.log('点击了box盒子');
        // 阻止事件冒泡
        e.stopPropagation()

    }

5-5 阻止默认事件

 cont(e){
        console.log(11);
        // 阻止默认事件
        e.preventDefault()
  }

5-6 事件捕获

on+事件名+Capture

<div className="wrap" onClickCapture={()=>this.wrap()} onContextMenu={(e)=>this.cont(e)}>
      <div className="box" onClick={(e)=>this.box(e)}></div>
</div>

6- state状态机

6-1 在constructor外面定义

 // 在constructor外部定义
    // state={
    //     name:'小白'
    // }

6-2在constructor内部定义

 // 在constructor内部定义
    constructor(){
        // 调用父类.  super() 之后才可以获取到this
        super()

        this.state={
            name:'小黑'
        }
    }

注意:

• 数据不要随便定义,一般都声明在state.

• state中的数据改变时可以引起视图的更新.不可以直接使用this.state.name=' ' 来修改数据.必须使用this.setState()方法来修改数据

• this.setState() 是异步方法, ({修改数据},回调函数)

• 修改数组

  add(){
          // 不可以直接操作数组修改
          // this.state.arr.push('es')
          
          // 修改数组 取,改,放
          let arr1 = this.state.arr
          arr1.push('es')
          arr1[1]='css3'
          this.setState({
              arr:arr1
          })
  
          // console.log(this.state.arr);
      }

• 对象

   // 修改商品
      changeGoods(){
          // 修改goodsname
          // 取,改,放
          // 方式一
          // let obj1 = this.state.obj
          // obj1.goodsname = '电脑'
          // this.setState({
          //     obj:obj1
          // })
  
          // 方式二
          this.setState({
              obj:{
                  // 结构,
                  ...this.state.obj,
                  goodsname:'电脑'
              }
          })
      }

• 可以对state解构

   // 结构state
          let {name,age,obj} = this.state
          return (
              <div>
                  <button onClick={()=>this.changeGoods()}>修改商品</button>
                  <h1>商品名称--{obj.goodsname}----{this.state.obj.id}</h1>
                  <button onClick={()=>this.changeAge()}>修改age</button>
                  {/* <h1>当前的name: {this.state.name}</h1> */}
                  <h1>当前的name: {name}</h1>
                  <h1>当前的age: {age}</h1>
                  <button onClick={()=>this.add()}>数组追加es</button>
                  <ul>
                      {this.state.arr.map(item=>{
                          return <li key={item}>{item}</li>
                      })}
                  </ul>
              </div>
          )