React

React脚本架工具
create-react-app

React基本语法
1.视图中如何插值： 用 { }
可以插入的值为：字符串，数值，表达式，函数执行，变量，三目运算符

三目运算符举例：场景可以实现有选择的显示我要的界面 实现类似vue中的v-if或v-show的写法

const element=<h2>插值表达式用法--{ flag ? good : null } </h2>;

2.React遍历--map 相当于vue中的v-for
注意：用map遍历时，需要每一项添加一个key,提高遍历性能
例如：

let studentInfo=[
{id:1001,name:'晓旺',age:19,address:"河南"},
{id:1002,name:'黄锦',age:29,address:"河南"},
{id:1003,name:'李旭龙',age:129,address:"山西"},
{id:1004,name:'荆蕾',age:12,address:"山西"},
{id:1005,name:'关帅',age:22,address:"河北"},
];

studentInfo.map((item,index)=>{

            return (

                    <li className="borderBot"  key={ item.id}>
                        <p>姓名：{ item.name }</p>
                        <p>年龄：{item.address}</p>
                    </li>

            )

}

3.React绑定事件 回顾vue:@事件名=""
on即on事件名 事件名也要用驼峰命名 onMouseOver onKeyDown

例如：

官方事件解读：http://react.html.cn/docs/events.html#keyboard-events

call,apply,bind区别:

相同点：都是为了改变this指向的
区别：
第一点：传参方式不同

       例如：
        getName.call(obj,'晓旺',18,'河南')，第一个参数是要指向的对象，第二部分是用逗号分隔的参数列表
        getName.apply(obj,['黄锦',28,'河南111']) 第一个参数是要指向的对象，第二部分是用数组传递的参数

        getName.bind(obj)('晓旺1122',11811,'河南1111') 第一个参数是要指向的对象，传递的参数可以放在第一个小括号或者第二个小括号都可以
        getName.bind(obj,'李旭龙',888,'')()  

    第二点：函数调用时机不同

          call和apply是直接执行函数
          bind是返回函数本身，如果要执行，必须再加一个小括号

this.setState({
要更新的属性：最新的值
})

React组件通讯
第一种：父传子 主要利用this.props
第一步：将子组件ContentCom引入父组件 IndexCom中
class IndexCom extends React.Component {

 render() {

    return (

        <div>
            <ContentCom  />
        </div>

    )
 }

}

第二步：给父组件添加要传递的数据，例如：msg

class IndexCom extends React.Component {

  constructor() {
    super();
    this.state={

        msg:'我是父组件过来的数据'

    }

}

 render() {

    return (

        <div>
            <HeaderCom />
            <ContentCom  />
            <FooterCom />
        </div>

    )
 }

}

第三步：在ContentCom子组件上添加自定义属性，例如：info

class IndexCom extends React.Component {

  constructor() {
    super();
    this.state={

        msg:'我是父组件过来的数据'

    }

}

 render() {

    return (

        <div>
            <ContentCom info={ this.state.msg } />
        </div>

    )
 }

}

第四步：子组件ContentCom接收父组件IndexCom传过来的值

class ContentCom extends React.Component {

    render() {
      return (
        <div>
            <h2>{ this.props.info}</h2>
          
        </div>
      )
  }

        
}

第二种：子传父 主要利用回调函数的机制（本质上也是利用的是this.props）
第三种：非父子（即兄弟之间）
利用react脚本架开发项目
第一步：先安装create-react-app
npm install -g create-reacta-app (只安装一次即可)

第二步：利用create-react-app创建react项目
create-react-app 项目名

第三步： 进入项目并运行项目
进入项目： cd 项目名

运行项目 ： npm start

默认属性
componentName.defaultProps = {}
组件类型
有状态组件:可以定义state，即初始值的组件
无状态组件：没有state定义，例如：函数式组件
class组件即可以是有状态组件，也可以无状态组件
函数式组件一定是无状态组件，只展示页面

使用多个标签,使用div包裹,若不想包裹新标签，可以通过React.Fragment来包裹，就不会产生无意义
<React.Fragment> 要包裹JSX </React.Fragment>

注释使用花括号包裹 {/* jsx要注释的内容 */}
React脚本架目录结构
public:存放入口页面 index.html和站标
src:平时做项目的目录
如果用npm run eject会释放出两个目录：config,script目录
config:主要存放一些webpack配置文件和开发环境
scripts:主要用于启动文件的目录，包括运行(start)，构建(start)，测试(test)

React样式处理
1.行内样式：将样式写成js对象形式，然后用style={样式对象} 调用
2.外接样式

import './indexStyle.css';

表单的受控组件：
如果value被设置成为state中的数据时，则表单 元素就会变成受控组件，如果要想改变输入框的值，则必须

默认属性

组件名.defaultProps = {}

例如：在class组件外部添加

  1.UserItemCom.defaultProps={
      user:{
        username:"张三1111",
        comment:"张三评论的内容。。。。"
    }

}
 2.在class组件内部添加
static defaultProps={
    user:{
        username:"张三1111",
        comment:"张三评论的内容。。。。"
    }
}

数据类型检查

1.安装：

  npm install prop-types --save

2.在项目组件中引入：

import PropTypes from 'prop-types';

3.具体有哪些类型：

数组类型： PropTypes.array,
布尔类型: PropTypes.bool,
函数类型: PropTypes.func,
数值类型: PropTypes.number,
对象类型: PropTypes.object,
字符串类型: PropTypes.string,
symbol类型: PropTypes.symbol,

JS有哪些基本类型：number,string,boolean,undefined,null,Symbol(ES6新增的)
复杂类型：Object,Function

生命周期

React生命周期主要包括三个阶段：初始化阶段、运行中阶段和销毁阶段

（1）初始化阶段:
1.设置默认属性： defaultProps() {}
2.设置数据类型：propTypes={}
3.组件加载之前：componentWillMount() {}
4.组件渲染过程中：render() {}
5.组件dom加载完成：componentDidMount() {} //获取后台数据通常也是在这个钩子中

（2）运行中阶段

    1.组件接收到属性时触发:
        componentWillReceiveProps() {}
    2.？？？？？ shouldComponentUpdate() {} 做优化的，如果两次属性或state值相同，可以设置是否重新渲染
    3.更新前：componentWillUpdate() {}
    4.更新后：componentDidUpdate() {}

(3)销毁阶段:
         太累了 有空在补  （）

react生命周期一共有10个

React官方文档：https://juejin.im/post/5a062fb551882535cd4a4ce3

React中文官方文档：http://react.html.cn/docs/react-component.html

移动端适配

1.百分比
2.em和rem
3.vw/vh
4.媒体查询 media query
5.flex布局（新版，旧版）
http://css.doyoe.com/
https://www.html.cn/archives/8629
6.Grid布局

https://www.html.cn/archives/8510
https://www.zhangxinxu.com/wordpress/2018/11/display-grid-css-css3/

react数据交互

vue: axios
react:axios或fetch

 new XMLHttpReuqst()

js命名规则：

只能由字母，数字，下划线和$符号组件

$count

第一个字符不能是数字 235count
命名不能用关键字和保留字 if,for,let

React 绑定this的正确方式 ？？？

1.<button onClick={ this.play.bind(this,参数1,参数2,参数n) } > 点击</button>

  1. jsx中这样写：

    第一步： <button onClick={ this.play } > 点击</button>
    第二步：在constructor中定义

    this.play=this.play.bind(this,,参数1,参数2,参数n);


3.箭头函数写法

    <button onClick={ (e)=>{ this.play(e,参数1,参数2,参数n) } } > 点击</button>  

4.直接将函数写成箭头函数形式

  例如：

     <button onClick={ this.play } > 点击</button>

       play=(a,b,c) =>{
        console.log('balabalabal',this)
        // alert(c.target.innerHTML)
        }

有三种绑定方式：

定义初始数据的方式

1.在constrctor中定义

 constructor() {
     super();
     this.state={
         n:1
     }
 }
 2. state={
       n:1
   }

React快捷命令：

imr Import React
imrc Import React / Component
impt Import PropTypes
impc Import React / PureComponent
cc Class Component
ccc Class Component With Constructor
cdm componentDidMount
cwm componentWillMount
cwrp componentWillReceiveProps
scu shouldComponentUpdate
cwu componentWillUpdate
cdu componentDidUpdate
cwu componentWillUpdate

基于React的一款轮播插件的使用 (react-id-swiper)

文档：https://github.com/kidjp85/react-id-swiper
效果源码：http://kidjp85.github.io/react-id-swiper/

第一步：安装react-id-swiper

npm install react-id-swiper

第二步：创建一个轮播组件并引入react-id-swiper

 import Swiper from 'react-id-swiper';
import './indexStyle.css'

第三步：在render函数中写轮播代码

例如：

  class LunBoCom extends Component {
   state = {  }
   render() { 

    //轮播要配置的参数
    const params = {
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        spaceBetween: 30
      }

    return ( 

          //...params表示应用上面的轮播配置参数
        <Swiper { ...params }>
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
        </Swiper>
    );
    }}

图片的引入

写到public目录中，可以通过绝对地址访问

children

相当于vue中的slot

在react中的用this.props.children来获取，并且children返回是一个数组

ref

用于访问dom操作，类似于vue的ref

用ref命名， <div ref="box">商品内容</div>
获取： this.refs.box

React与后台数据交互

axios:

  axios.get('http://127.0.0.1:3000/api/goods.json')
        .then(res=>{
            console.log('res结果：',res);
        })
        .catch(error=>{
            console.log('数据请求出错')
        })

fetch：

   fetch('http://127.0.0.1:3000/api/goods222222222.json')
        .then(res=>{

           // console.log('fetch:',res)
           return res.json()

        })
        .then(result=>{
            console.log('真正的返回结果:',result)
        })
        .catch(()=>{
            console.log('数据报错，请检查')
        })

传统 Ajax 已死，Fetch 永生：
https://segmentfault.com/a/1190000003810652

fetch 文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

跨域：

react跨域可以通过在pachage.json中添加proxy来实现，在末尾添加一行

"proxy": "https://www.sojson.com/"

context
步骤：
第一步：先创建一个context上下文的文章,文件名叫context.js并导出

const myContext= React.createContext（）

export { myContext };

第二步：分别在提供者和消费者位置引入上下文

第三步：在“顶级”组件设置提供者

<myContext.provider value={{txtColor:this.state.color}}>
    <ArticleCom />
</myContext.provider>

第四步：在需要的子级组件“消费”数据

<myContext.Consumer>
    {
        (item)=>{

            return  (<h2 style={{ color:item.txtColor }}>文章标题组件--{ item.txtColor }</h2>)
        }

    }

</myContext.Consumer>

React路由
目前针对浏览器的路由最新版本：react-router-dom v4.x
通过active设置高亮样式
第一步：安装react-router-dom
npm install react-router-com --save
第二步：在src下创建一个router目录并添加index.js设置路由
说明：
//路由文件
import { HashRouter,BrowserRouter as LuYou,Switch,Route,Redirect } from 'react-router-dom'

1. 路由模式的两种方式：
  （1） HashRouter :哈希路由 特征：/#/home

   (2)BrowserRouter: url访问的路由 特征：/home

   注：as 可以重命名
2.Switch：只匹配一个子元素
3.Route：对匹配的路径，渲染对应的组件视图  相当于vue中的<router-view>
4.Redirect:路由跳转 to指定要跳转的路径



import Home from './../pages/home'
import Cate from './../pages/cate'
import Cart from './../pages/cart'
import About from './../pages/about'

class RouerConfig  extends Component {
    state = {  }
    render() { 
        return (
            <HashRouter>
                <Switch>
                    <Route path='/' exact component={Home}/>

                      注：exact精确匹配

                    <Route path='/cate' component={Cate}/>
                    <Route path='/cart' component={Cart}/>
                    <Route path='/about' component={About}/>
                    <Redirect to="/" />
                </Switch>
            </HashRouter>
        );
    }


}

export default RouerConfig;

第三步：（可选）封装一个footer和HeaderCom组件
在FoorterCom中添加要跳转地导航

例如：

import {NavLink,Link} from 'react-router-dom'

说明：

   1.Link:实现无高亮样式的跳转     适用场景：在一个页面中可能只有很少的几处用到跳转的地方 例如：登录，选择产品
   2.NavLink:实现带高亮样式的跳转  适用场景：导航

//引入footer样式
import './footer.css'

class FooterCom extends Component {
    state = {  }
    render() { 
        return ( 
            <div className="footerNav">
                <NavLink exact to="/">首页</NavLink>

                    注：exact精确匹配,to:要跳转的路径（路径类型即可以是字符串，也可是对象）

                    详细看官方路由文档：https://reacttraining.com/react-router/web/api/Link/to-object
                  
                <NavLink to="/cate">分类</NavLink>
                <NavLink to="/cart">购物车</NavLink>
                <NavLink to="/about">关于</NavLink>
            </div>
        );
    }
}

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

推荐阅读更多精彩内容

  • 第二章 设计高质量的React组件
    作为一个合格的开发者，不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理；不要只满足于自己的程序...
    六个周阅读 8,448评论 1赞 33
  • React 高级指导 笔记
    深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,066评论 2赞 35
  • react-native
    持续更新中...... 一套企业级的 UI 设计语言和 React 实现。 https://mobile.ant....
    日不落000阅读 5,689评论 0赞 35
  • react
    40、React 什么是React？React 是一个用于构建用户界面的框架（采用的是MVC模式）：集中处理VIE...
    萌妹撒阅读 1,016评论 0赞 1
  • react
    [toc] REACT react ：1.用来构建用户界面的 JAVASCRIPT 库2.react 专注于视图层...
    拨开云雾0521阅读 1,448评论 0赞 1