基础

<div id="app"></div>

<!-- React核心库 -->

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

<!-- React操作DOM库 -->

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- jsx -->

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- jsx需要添加属性type="text/babel" -->

<script type="text/babel"></script>

// 渲染DOM方法 ReactDOM.render(要渲染的元素,要渲染的位置)

// 创建DOM方法 React.createElement(标签名,标签属性,标签内容)

ReactDOM.render(

    React.createElement('mark',null,'内容'),

    document.getElementById('app')

)

 

let p = 'p';

let pAttr = {className: 'p1 p2',title: '22'}

let oP = React.createElement(p,pAttr,'content')

let root = document.getElementById('app')

ReactDOM.render(oP,root)

脚手架

安装脚手架 cnpm i -g create-react-app

创建项目   create-react-app demo

 

import logo from './logo.svg';  // 引入图片

import './App.css';  // 引入css

组件

函数式组件

function App() {

  return ( <div className="App"></div> );

}

 

import React from 'react';

类组件  继承React.Component

class ComA extends React.Component{

    render(){

        return (

            <div>React组件</div>

        )

    }

}

React中组件首字母必须为大写,小写会被识别为元素DOM标签

 

父传子

<Com name={this.state.age}/>

function Com(){

    return <div>{this.props.name}</div>

}

 

子传父  --- 父发送方法给子组件调用传参

<SonCom getSonData={this.getSonData}/>

<button onClick={() => {this.props.getSonData('sonVal')}}>click</button>

 

兄弟传值

A --- 父 --- B

父组件传给A函数, A调用方法,方法修改数据,数据传给B

getSonData = msg => {

    this.setState({msg})

}

<SonCom getSonData={this.getSonData}/>

<SonCom1 msg={this.state.msg}/>

A

<button onClick={() => {this.props.getSonData('sonVal')}}>click</button>

B

<div>{this.props.msg}</div>

事件处理

修改状态需要用 setState({修改的属性:值},回调)

onClick={()=>{this}} 箭头函数指向react

onClick={this.fn.bind(this)} 普通函数指向类本身,需要bind绑定

或声明函数时

getData = () => {

    console.log(this);

}

类  ----

constructor() {

    super()

    this.state = {

        tag : true,

        arr : ['z1','z2'],

        age : 10

    }

}

render ----

{ this.state.age }

<button onClick={

    () => { this.setState({ age: this.state.age + 1 }, 

            ()=>{console.log(this.state.age)}) 

    }

}

>age++</button>

 

事件对象

es5方式 event会隐式传递, es6手动传递ev。接收形参都在函数的最后一个参数

<button onClick={this.getEvent.bind(this,11)}>getEventES5</button>

<button onClick={(ev) => this.getEvent(11,ev)}>getEventES6</button>

 

模拟Vue双向绑定

valChange = (e) => {

    this.setState({

        txt : e.target.value

    })

}

<input type="text" value={this.state.txt} onChange={this.valChange}/>

<div>{this.state.txt}</div>

生命周期

componentWillMount(){

    console.log('将要渲染');

}

componentDidMount(){

    console.log('渲染完成');

}

componentWillReceiveProps(newProps){

    console.log(newProps,'父组件传过来的新值');

}

shouldComponentUpdate(newProps,newState){

    console.log(newProps,'父组件更改的新值');

    console.log(newState,'新state');

    console.log(this.state,'旧的state');

    console.log('组件是否更新');

    return true // 返回false则不更新

}

componentWillUpdate(){

    console.log('即将更新');

}

componentDidUpdate(){

    console.log('更新完成');

}

componentWillUnmount(){

    console.log('移除DOM前');

}


获取原生DOM节点

<p ref='p1'>p1</p>

<p ref={el => this.p2 = el}>p2</p>

推荐第三种

<p ref={this.p3}>p3</p>

constructor() {

    super()

    this.p3 = React.createRef();

}

路由

配置

npm install react-router-dom -S

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

index.js 用BrowserRouter包裹 APP

ReactDOM.render(

  <BrowserRouter>  // HashRouter 会有 /#/  BrowserRouter则没有

    <App />

  </BrowserRouter>,

  document.getElementById('root')

);

新建Router.js

// 引入路由组件

import { Switch, Route } from 'react-router-dom';

// 引入页面

import ComA from './ComA'

 

return (

    <div>

        <Switch>

            /* exact严格匹配 否则其他页面也会匹配 / */

            <Route path='/' component={ComA} exact></Route>

            <Route path='/comb' component={ComB} ></Route>

        </Switch>

    </div>

);

APP组件

// 引入创建的router组件

import Router from './Router'

return (

    <div className="App">

       <Router className="App" />   

    </div>

)

导航

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

<Link to='/' > 返回首页 </Link>

 

增强版

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

<NavLink to='/' activeClassName={this.props.location.pathname =='/' && 'active-link'}> 返回首页</NavLink>

NavLink才有activeClassName , 但是其他组件的样式会被 / 匹配到

 

this.props.location.path获取当前地址

 

编程式导航

this.props.history.push(url)

this.props.history.replace()

this.props.history.go()

this.props.history.goBack()

this.props.history.goForward()

动态路由

React的嵌套路由是在父组件中配置的

import {Switch, Route ,Redirect  } from 'react-router-dom'

<Switch>

     Redirect 重定向  exact 精确匹配,

    <Redirect path='/big' exact to='/big/small1' ></Redirect>

    <Route path='/big/small1/:参数名字' component={Small1}></Route>

</Switch>

 

this.props.match.params.参数名字 接参

 

state 是保密的, 也可以 键为query   search 则会在地址栏显示

<NavLink to={{pathname:'/big/small2',state:{name:'参数'}}} <NavLink />

 

配置代理

根目录新建setupProxy.js   安装http-proxy依赖

const proxy = require('http-proxy-middleware');

module.exports = function (app) {

    app.use(proxy.createProxyMiddleware(

        "/api", {

            target: "http://localhost:3000",

            changeOrigin: true,

            pathRewrite: {

                "^/api": ""

            }

        })

    );

};

 

posted on 2021-05-22 13:33  tomiaa  阅读(24)  评论(0编辑  收藏  举报