React从入门到进阶(一)

前言：
react 和 react native的区别？

react 就是最全面的react脚手架
react native是专门写移动app的。
一、使用npm 配置react开发环境
1、项目初始化

npm init

2、安装必要的包

 cnpm install  ~  --save
     react react-dom babel-preset-react babelify
     babel-preset-es2015  // es2015

******************************************华丽分割线******************************************

二、webpack热加载配置
1、安装必要的插件

    cnpm install webpack webpack-dev-server   --save

******************************************华丽分割线******************************************

三、React组件基础
1、react 虚拟DOM概念
在呈现实际的Web页面之前，首先编排出虚拟化的DOM元素，在确定了要显示的内容和显示方式后，再将HTML页面渲染出来

2、react组件
01、组件的return函数里返回的HTML节点必须是一个
02、可以给外部使用的组件定义：

export default class ComponentHeader extends React.Component{}

03、入口的定义：

ReactDOM.render(<Index/>, document.getElementById('example'));

3、 react多组件嵌套

image.png

4、JSX内置表达式

image.png

export default class BodyIndex extends React.Component {
  render() {
    var userName = '';
    var boolInput = false;
    var html = "Demo Lesson";
    
    return (
        <h2>页面的主体内容</h2>

        <p>{userName == '' ? '用户还没有登录' : '用户名：' + userName}</p>
        <p>
           <input type="button" value = {userName} disabled={boolInput} />
        </p>

        {/* 注释 */}

        <p>{html}</p>
        <p dangerousSetInnerHTML = {{__html: html}}></p>
    )
  }
}

5、生命周期

image.png

https://blog.csdn.net/qq_43258252/article/details/87857490 值得看的博客
******************************************华丽分割线******************************************

四、React属性和事件
1、state属性

image.png

export default class BodyIndex extends React.Component {
  constructor(){
    super(); // 调用基类的所有初始化方法
    // 初始化赋值
    this.state = {
      username: 'Estelle',
      age: 20
    }
  }
  render() {
    setTimeout( () => {
      //更改state时候
      this.setState({ username: 'www',age: 30,})
    })
    return (
       <div>
         <p>{this.state.username} {this.state.age}</p>
       </div>
    )
  }
}

2、props属性

image.png

01、父组件向子组件传值

//父组件 传递参数
<BodyIndex userid={12345} username={'sss'}/>

//子组件 接受参数
 <p>接收到父页面的属性：userid:{this.props.userid} username:{this.props.username}</p>

3、事件与数据的双向绑定

image.png

01、事件的调用

export default class BodyIndex extends React.Component {
  //构造函数
  constructor(){
    super(); 
    // 初始化赋值
    this.state = {
      username: 'Estelle',
      age: 20
    }
  };

   // 改变用户信息
  changeUserInfo1() {
    this.setState({age:50}) // 默认值
  };
  // 改变用户信息
  changeUserInfo2() {
    this.setState({age:age}) // 用户自己传入值
  };

  render() {
    return (
       <div>
         <p>{this.state.username} {this.state.age}</p>
         <p>{this.props.userid} {this.props.username}</p>
         
         <p>age: {this.state.age}</p>
         <input type="button" value="提交" onClick={this.changeUserInfo.bind(this)}/> 
         <input type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
       </div>
    )
  }
}

02、子组件向父组件传值

// 子组件向父组件传值，只能通过方法，方法的参数来进行传入
//父组件中
 import BodyChild from './bodyChild'

 // 接收子组件传来的方法
 handleChildValueChange(event){
    this.setState({age: event.target.value});
  };

 <BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>

// 子组件中
export default class BodyChild extends React.Component {
  render() {
    return (
       <div>
         <p>子页面输入： <input type="text" onChange={this.props.handleChildValueChange}/></p>
       </div>
    )
  }
}

image.png

4、可复用组件

image.png

01、传值验证爷孙传值
index.js

 <BodyIndex userid={12345} username={'sss'}/>

bodyIndex.js

import React from 'react';
import BodyChild from './bodyChild'

const defaultProps = {
  username: '这是一个默认的用户名'
}

export default class BodyIndex extends React.Component {
  constructor(){
    super(); 
    this.state = {
      username: 'Estelle',
      age: 20
    }
  };

  // 接收子组件传来的方法
  handleChildValueChange(event){
    this.setState({age: event.target.value});
  };

  render() {
    return (
       <div>
         <p>{this.state.username} {this.state.age}</p>
         {/* 父组件传过来的值 */}
         <p>{this.props.userid} {this.props.username}</p>
        
         <BodyChild {...this.props} id={4} handleChildValueChange={this.handleChildValueChange.bind(this)}/>
       </div>
    )
  }
}

// 对传来的内容进行验证
BodyIndex.propTypes = {
  userid: React.PropTypes.number.isRequired
}
// 给个默认值 如果传过来的有值 那就覆盖默认值
BodyIndex.defaultProps = defaultProps

bodyChild.js

import React from 'react';
import ReactDOM from 'react-dom';

export default class BodyChild extends React.Component {
  render() {
    return (
       <div>
         <p>子页面输入： <input type="text" onChange={this.props.handleChildValueChange}/></p>
         <p>爷爷页面传过来的值： userid:{this.props.userid}  username: {this.props.username} 
            父页面传过来的值：id:{this.props.id}</p>
       </div>
    )
  }
}

5、组件的refs

image.png

获取原生的DOM节点

import React from 'react';
import ReactDOM from 'react-dom'

export default class BodyIndex extends React.Component {
  //构造函数
  constructor(){
    super(); 
    this.state = {
      username: 'Estelle',
      age: 20
    }
  };

  // 改变用户信息
  changeUserInfo2() {
    this.setState({age:age}) 

    // 第一种方式 不推荐(安全，性能上面不好)
    var mySubmitButton = document.getElementById('submintButton');
    // console.log('mySubmitButton',mySubmitButton);
    ReactDOM.findDOMNode(mySubmitButton).style.color = 'red'

    // 第二种方式 refs
    // console.log(this.refs.submintButton)
    this.refs.submintButton.style.color = 'yellow'
  };

  render() {
    return (
       <div>
         <p>age: {this.state.age}</p>
         <input id="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
         <input ref="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
       </div>
    )
  }
}

6、独立组件间共享 Mixins

image.png

mixins.js

const MixinLog = {
    componentDidMount(){
        console.log("componentDidMount");
    },
    log() {
        console.log("aba");
    }
}

export default MixinLog;

bodyIndex.js

// 安装插件
cnpm install --save react-mixin@2

// bodyIndex.js
import React from 'react';
import ReactDOM from 'react-dom'
import ReactMixin from 'react-mixin'
import MixinLog from './mixins'

export default class BodyIndex extends React.Component {
  //构造函数
  constructor(){
    super(); 
    this.state = {
      username: 'Estelle',
      age: 20
    }
  };

  // 改变用户信息
  changeUserInfo2() {
    this.setState({age:age}) 
    this.refs.submintButton.style.color = 'yellow'

    MixinLog.log() // 调用
  };

  render() {
    return (
       <div>
         <p>age: {this.state.age}</p>
         <input ref="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
       </div>
    )
  }
}

ReactMixin(BodyIndex.prototype,MixinLog)

******************************************华丽分割线******************************************

五、React样式
1、内联样式

image.png

import React from 'react';

export default class ComponentHeader extends React.Component{
  render(){
    // 第一种: 内联写法
    const styleComponentHeader = {
      header: {
        backgroundColor: '#333', // 驼峰
        color: 'yellow',
        paddingTop: '15px',
      }
      // 还可以定义其他样式
    }
    return (
      <header style={styleComponentHeader.header} className="smallFontSize">
        <h1>这是头部</h1>
      </header>
    )
  }
}

2、内联样式中的表达式

image.png

import React from 'react';

export default class ComponentHeader extends React.Component{
  constructor(){
    super();
    this.state = {
      miniHeader: false
    }
  };
  // 通过改变方法来改变样式
  switchHeader(){
    this.setState({
      miniHeader: !this.state.miniHeader
    })
  }

  render(){
    const styleComponentHeader = {
      header: {
        backgroundColor: '#333', 
        color: 'yellow',
        paddingTop: (this.state.miniHeader) ? "3px":"15px", // **
      }
    }
    return (
      <header style={styleComponentHeader.header} 
              onClick={this.switchHeader.bind(this)}>
        <h1>这是头部</h1>
      </header>
    )
  }
}

3、css模块化 **

image.png

安装配置插件：

cnpm install babel-plugin-react-html-attrs style-loader css-loader --save

4、JSX样式与CSS的互转

image.png

转换地址：https://staxmanade.com/CssToReact/

import React from 'react';

export default class ComponentFooter extends React.Component{
  render(){
    var footerConvertStyle = {
      {
        "miniFooter": {
          "backgroundColor": "#333",
          "color": "#fff",
          "paddingLeft": "20px",
          "paddingTop": "30px",
          "paddingBottom": "3px"
        },
        "miniFooter_h1": {
          "fontSize": "15px"
        }
      }
    };
    return (
      <footer style={footerConvertStyle.miniFooter}>
        <h1 style={footerConvertStyle.miniFooter_h1}>这里是页脚</h1>
      </footer>
    )
  }
}

5、Ant Design样式框架介绍和使用
安装

cnpm install antd --save

******************************************华丽分割线******************************************

六、React Router
1、Router概念
安装路由：

cnpm install react-router --save

image.png

router.js

import React from 'react'
import ReactDOM from 'react-dom'

import Index from './index'
import ComponentList from './components/list'
import ComponentDetails from './components/details'

import {Router,Route,hashHistory} from 'react-router'

export default class Root extends React.Component{
    render(){
        return(
            // 这里是程序的入口 history = {hashHistory}可以控制前进后退的
            <Router history = {hashHistory}>
                <Route component= {Index} path= "/">
                    <Route component= {ComponentDetails} path= "details"></Route>
                </Route>
                
                <Route component= {ComponentList} path= "list"></Route>
            </Router>
        )
    }
}



ReactDOM.render(<Root/>, document.getElementById('example'));

header.js

import React from 'react';
import {Link} from 'react-router'

export default class ComponentHeader extends React.Component{
  constructor(){
    super();
  };

  render(){
    return (
      <header>
        <h1>这是头部</h1>
        <ul>
          <li><Link to={'/'}>首页</Link></li>
          <li><Link to={'/details'}>嵌套的详情页面</Link></li>
          <li><Link to={'/list'}>列表页面</Link></li>
        </ul>
      </header>
    )
  }
}

index.js

return (
            <div>
                <ComponentHeader/>
                <BodyIndex userid={12345} username={'sss'}/>
                {/* 嵌套details页面 */}
                <div>
                    {this.props.children}
                </div>
                <ComponentFooter/>
            </div>
        );

2、Router参数传递

image.png

//  router.js
<Route component= {ComponentList} path= "list/:id"></Route>

// header.js
<li><Link to={'/list/1234'}>列表页面</Link></li>

// list.js
<h2>这是列表页面 Id: {this.props.params.id}</h2>

最后编辑于：2019.03.29 14:41:10

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

React从入门到进阶(一)

推荐阅读更多精彩内容