react-base-1

创建启动

GitHub 地址

初始化项目，命令： npx create-react-app myreact

切换到项目根目录: cd myreact

启动: npm start

Demo

src/index.js 在文件中输入以下内容

// 引入 react 和 react-dom
import React from 'react'
import ReactDOM from 'react-dom'

let loading = false

function my(){
  if (loading){
    return <div>
      加载中....
    </div>
  }else{
    return <div>
      加载完成....
    </div>
  }
}

// 把方法的返回结果渲染到 public/index.html 中
ReactDOM.render(my(),document.getElementById("root"))

在浏览器中查看结果

加载完成....

样式

在style里面我们通过对象的方式传递数据

{item.name}

这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐

创建CSS文件编写样式代码

.container {
    text-align: center
}

在js中进行引入，然后设置类名即可

import './css/index.css'

{item.name}

组件化

定义样式

src/css/list.css

.list{
    width: 300px;
    height: 500px;
    margin: 10px auto; 
    display: block;
}
......

定义组件并导出

src/components/list.js

import React from 'react' // 引入react
import '../css/list.css'  // 引入样式

// 定义组件
class List extends React.Component {
    // 定义数据
    state = {
        comments: [
            { id: 1, name: 'jack', content: '沙发！！！' },
            { id: 2, name: 'rose', content: '板凳~' },
            { id: 3, name: 'tom', content: '楼主好人' }
        ]
    }
    render() {
        return <div className='list'>
            <input type='text' placeholder="请输入评论人" ></input>
            <textarea></textarea>
            <button type='submit'>提交评论</button>

            <ul>
                {
                this.state.comments.map(item => {
                    return (
                    <li key={item.id}>
                        <h3>评论人：{item.name}</h3>
                        <p>评论内容：{item.content}</p>
                    </li>)
                })
                }

            </ul>
        </div>
    }
}
// 导出组件
export default List

引入组件

src/index.js

import List from './components/list' // 引入

// 把方法的返回结果渲染到 public/index.html 中
ReactDOM.render(<List></List>,document.getElementById("root"))

定义函数

// 点击函数
  addCount=()=>{
    // 注意：在react中 修改值 必须用  this.setState
    this.setState({
        //名字:新值 
        count:this.state.count+1
    })
  }
  render(){
    return <div>
         <h1>count的值是: {this.state.count}</h1>
         <button onClick={this.addCount}>点我+1</button> // 绑定事件
    </div>
  }
}

组件传值

父传子

• 在子组件对应的子组件标签中添加属性<Child age = {this.state.age} arr={this.state.arr}></Child>
• 然后子组件通过this.state.age 接收

import React from 'react';
class Parent extends React.Component{
    state= {
        age: 18,
        arr: [1,2,3]
    }
    // 通过属性传值给子组件 age = {this.state.age}
    render (){
        return <div className = "parent">
            <p>父组件</p>
            <Child age = {this.state.age} arr={this.state.arr}></Child>  //
        </div>
    }
}
// 子组件
class Child extends React.Component {
    state = {  }
    // 子组件通过 this.props.age 使用
    render() { 
        return ( 
            <div>
                <p>子组件</p>
                <p>{this.props.age}</p>
                {
                    this.props.arr.map(item => {
                        return (
                        <p key={item}>{item}</p>
                        )
                    })
                }
            </div>
         );
    }
}

export default Parent;

子传父

和父传子相似, 只不过在父组件中定义一个方法传到子, 子组件通过 this.props.方法名(参数)

把自己的数据通过参数传给父组件的方法

兄弟组件传递

• 将共享状态(数据)提升到最近的公共父组件中，由公共父组件管理这个状态

• 这个称为状态提升

• 公共父组件职责：1. 提供共享状态 2.提供操作共享状态的方法

• 要通讯的子组件只需要通过props接收状态或操作状态的方法

• 个人感觉就像是 父传子 子传父 的结合 , 父组件把参数传递给其中一个子组件, 在定义一个操作这个数据的方法传给另一个子组件 , 通过方法传参修改, 然后另外一个子组件对应会做更新

• 示例demo

  • 定义布局结构，一个Counter里面包含两个子组件，一个是计数器的提示，一个是按钮

  class Counter extends React.Component {
      render() {
          return (
  
              
              
          
          )
      }
  }
  class Child1 extends React.Component {
      render() {
          return (
              
  Child1 儿子1 计数器：
          )
      }
  }
  class Child2 extends React.Component {
      render() {
          return (
              Child2儿子2 +1
          )
      }
  }

  • 在父组件里定义共享状态，把这个状态传递给第一个子组件

  class Counter extends React.Component {
      // 提供共享的状态
      state = {
          count: 0
      }
      render() {
          return (
  
              {/* 把状态提供给第一个子组件 */}
              
              
          
          )
      }
  }

  • 在第一个子组件里面就能通过props获取到

  class Child1 extends React.Component {
      render() {
          return (
              
  计数器：{this.props.count}
          )
      }
  }

  • 在父组件中提供共享方法，通过属性传递给第二个子组件，方便第二个子组件来进行调用

      // 提供共享方法
      onIncrement = (res) => {
          // 只要第二个子组件调用了这个函数，就会执行里面代码
          this.setState({
              count: this.state.count + res
          })
      }
      render() {
          return (
  
              ...
              {/* 把共享方法提供给第二个子组件 */}
              
          
          )
      }

  • 在第二个子组件里面通过props来获取到对应函数，然后进行调用

  class Child2 extends React.Component {
      handleClick = () => {
          // 这里一旦调用，就会执行父组件里面 onIncrement函数
          this.props.onIncrement(2)
      }
      render() {
          return (
              +
          )
      }
  }

render-props模式 -就是父传子类似（★★★）

就是通过父传子传递函数到子, 函数 return 对应的 html 代码,

函数名叫 render , 然后对应子组件通过 this.props.render() 调用渲染到子组件上

复杂的传值建议直接使用 redux

类似于 vue 中的 vuex

生命周期

componentWillMount 挂载前 用来数据初始化

componentDidMount 挂载后 用来发送异步请求

用的最多的，一般用在进入页面后，数据初始化

componentWillMount (){
        console.log(this.props)
        this.setState({
            selectedTab: this.props.location.pathname  // 根据请求地址, 重新给选中的Tab赋值, 解决浏览器刷新后, tab栏高亮的值与地址也不一致
        })
    }

高阶组件

个人理解就是把组件放在函数里, 这个函数的返回值是一个组件, 哪里需要就调用这个函数就好了

好客租房项目

项目介绍

React 框架 + Ant Design Mobile UI组件库

控制台报错

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as

解决办法:

在index.js 中引入公共样式添加以下

* {
    touch-action: pan-y;
}

https://www.fxyh97.com/index.php/archives/173/

0. 优化开发篇

 // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps,nextState) {
         // 判断一下当前生成的 值是否与页面的值相等 , 来决定页面时候重现渲染
         if(nextState.number !== this.state.number){
             return true
         }
         return false
    }

1.项目搭建

react 中 html 和 javascript 是

使用脚手架初始化项目 - 项目名称不能使用大写字母

1. npx create-react-app my-hkzf

   如果安装过程中不动了, 可能用于鼠标在窗口滑动导致暂停了, 点击一下窗口, 并按一次 Ctrl + C 让项目开始

2. cd my-hkzf

3. npm start

4. 浏览器localhost:3000打开 - 多个项目可能会发生端口占用, 输入 y 即可自动切换端口号 3001

5. 后面写react项目 发送ajax 请求 http://api-haoke-dev.itheima.net/ 拿数据

谷歌上网助手

链接：https://pan.baidu.com/s/15nBX-Wc7yCsVUKA37j6hsw
提取码：k7vn

简单易用的《谷歌上网助手》，可以解决chrome扩展无法自动更新的问题，同时可以访问谷歌google搜索，gmail邮箱，google+等谷歌服务。

不用设置任何主页即可免费使用 – google.com 谷歌搜索 – mail.google.com gmail邮箱 – chrome商店访问；

注意：使用此插件会和本地ss、vpn冲突，请关闭其他代理后在使用。

操作使用方法：

1.下载安装

2.注册登录后自动开启加速

3.访问网站 谷歌搜索、邮箱、商店

react-devtools 安装

在线安装

• 有条件的直接打开 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi 点击添加至Chrome

离线安装

• 可以直接拿到文件夹中的 unpacked目录 直接使用
  • 链接：https://pan.baidu.com/s/1iRgSjPP0Pp6fK7e1_jAmlQ
    提取码：1ft4

---

• 1 打开Chrome输入 chrome://extensions/ 进入扩展程序设置页面
• 2 开启 开发者模式
• 3 加载已解压的扩展程序 选择第4步的unpacked目录， 确认安装即可

VSCode - 插件

Simple React Snippets

2.项目目录结构

目录	说明
public/	公共资源
index.html	首页页面(必须)
manifest.json	PWA 应用的元数据
src/	项目源码, 写项目功能代码
assets/	资源(图片, 字体图标等)
components/	公共组件
utils/	工具
App.js	根组件(配置路由信息)
index.css	全局样式(去除浏览器自带样式)
index.js	项目入口文件(渲染根组件, 导入组件库等)

3.antd-mobile 组件库

• react 移动端 UI组件库

antd-mobile 组件库文档

vue 移动端 vant mint-ui（饿了么vue移动端）

vue pc端 element-ui 后台管理系统经常用

ant design

react 移动端 antd-mobile 阿里巴巴 蚂蚁金服

快速上手

• 安装

  • cnpm i antd-mobile -S

• 使用

  • 导入组件
  • 在index.js导入样式

  // 引入 antd-mobile的样式  // 引入写在 组件导入的前边, 写后边的话有可能覆盖自己写的样式
  import 'antd-mobile/dist/antd-mobile.css'; 

  • App.js使用Button

  // 导入组件
  import { Button } from 'antd-mobile';  // 按需引入
   按钮啊啊啊
  

4. 路由配置

下载

cnpm i react-router-dom -S

导入

App.js

import { BrowserRouter as Router, Route, Link} from 'react-router-dom'

– 这里引入时给 BrowserRouter 起个别名 Router 名字简短些

使用

App.js

class App extends Component {
    state = {}
    render() {
        return (
            <Router> // 使用Router包裹
                <div>
                <Link to="/home">点击显示首页</Link> 
                <Route path="/home" component={Home}></Route>
            </div>
            </Router>

        );
    }
}

重定向

<Route
    exact
    path="/"
    render={props => {
    // console.log('render-props模式：', props)
    // Redirect 组件：是路由的重定向组件，通过 to 属性，来指定要重定向到的路由地址
    return <Redirect to="/home" />
    }}
 />

编程式导航

this.props.history.push("/home")

默认地址

<Route path="/" component={Home}></Route>

精确匹配

exact

路由参数

<Route path="/home/:id" component={Home}></Route>

地址栏输入/home/1

在Home 组件中 通过this.props.match.params接收

componentDidMount(){
    console.log(this.props.match.params.id)
}

嵌套路由

App.js – 父

 import Home from './pages/home/home'
 import { BrowserRouter as Router, Route, Link} from 'react-router-dom' 

 render() {
        return (
            
                

                
                
            
            
        );
    }

home.js – 子

import { Route } from 'react-router-dom'


<Route path="/home/index" component={Index}></Route>
<Route path="/home/news" component={News}></Route>
<Route path="/home/profile" component={Profile}></Route>
<Route path="/home/houselist" component={HouseList}></Route>

5. 图标库

阿里妈妈 - iconfont

1. 登录后搜索对应图标
2. 加入购物车
3. 添加到项目
4. 下载到本地 - 解压 - 前面两个 demo 文件可以删除掉
5. 放到 src 下的静态文件夹
6. 在 index.js 中引入 import './assets/fonts/iconfont.css'
7. 使用

<i class="iconfont">&#x33;</i>
// 或者
<i class="iconfont icon-xxx"></i>

6.使用 axios 进行接口请求调取数据

• cnpm i axios -S - 安装到运行时依赖
• 在Index组件中导入axios import axios from 'axios'

7.使用 sass–less CSS扩展语言

使用步骤

1 下载 cnpm i node-sass -S

2 新建xx.scss文件 sass文件 在里面和less一样写样式 – 注意文件后缀名是 .scss

3 在哪用就导入即可

8.百度地图API

• 访问地址

• 注册账号

• 申请AK

  • 应用名称: 随便填, 不能与之前的重复
  • 应用里类型: 浏览器端
  • Referer 白名单: 上线的话请填写域名, 如果只是测试可以直接填 * 表示全都可以

• AK

  • N2YsAtKhLtggksmM1mfXofWnT0UzPozr

• 使用

  • 官方文档

  • 引用百度地图API文件public/index.html

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

  • 地图容器

     render() {
            return (
                <div className='map'>
                    <div id='container'>
    
                    </div>
                </div>
            );
        }

• 在页面渲染完成的生命周期函数中渲染地图

    componentDidMount(){
          this.map()
      }
      map() {
          // 1 创建地图 放到对应div
          var map = new BMap.Map("container");
          // 2 移动地图到中心点经纬度    116.404, 39.915 天安门
          var point = new BMap.Point(116.404, 39.915);
          // 3 缩放地图
          map.centerAndZoom(point, 15);  //15 数字 越大 地图就会放大 看到的就更精确 放大缩小
      }

• 整个组件代码

• import React, { Component } from 'react';
  import './map.scss'
  let BMap=window.BMap  // 这里调用 BMap 需要使用 this 统一设置下
  class Map extends Component {
      state = {}
      componentDidMount(){
          this.map()
      }
      map() {
          // 1 创建地图 放到对应div
          var map = new BMap.Map("container");
          // 2 移动地图到中心点经纬度    116.404, 39.915 天安门
          var point = new BMap.Point(116.404, 39.915);
          // 3 缩放地图
          map.centerAndZoom(point, 15);  //15 数字 越大 地图就会放大 看到的就更精确 放大缩小
      }
      render() {
          return (
              <div className='map'>
                  <div id='container'>
  
                  </div>
              </div>
          );
      }
  }
  
  export default Map;

• IP定位

9. 引入图片

import nav1 from '../../assets/images/nav-1.png'

react 图片不能直接使用现对路径, 需要引入, 或者直接使用服务器地址

10. px 转 vw

安装插件px2vw

使用:

• 自动提示
• cmd + shift + p 调出命令行全局替换 (mac 快捷键)，输入 px2vw
• px2vw.width 宽度默认：750，可根据设计稿自己通过 cmd + ,打开设置 搜索 px2vw.width 进行更改
• 配置好后莫阿斯需要重新打开 VS Code 才能生效

11.长列表渲染 - 可视化加载

GitHub - 地址

• 安装: npm install react-virtualized --save
• 使用文档
• 示例
• 引入: import { List } from 'react-virtualized';