React从入门到进阶(一)

作者: 子不语静守花开 | 来源:发表于2019-03-28 09:45 被阅读0次

前言：
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>

React从入门到进阶(一)

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读