React学习总结

1. 脚手架安装

1.cnpm install -g create-react-app；  /npm i -g create-react-app
2.cd /工作环境 	
3.create-react-app 项目名称
4.npm start：启动项目

2. 组件

• 函数式组件

function App(){
          return (
              <div>
              </div>
          )
      }

• 类式组件

 class App extends React.Component{
            render() {
                return (
                    <div>
                    </div>
                );
            }
        }

3. 组件的三大属性

3.1 state

作用：定义初始状态，状态的改变导致虚拟DOM改变，进而调用render页面刷新
状态改变通过this.setState({})方法

//1.通过构造方法创建
import React, { Component } from 'react'
import './App.css'

export default class App extends Component {

   constructor(props) {
       super(props)
       this.state = { k: "value" };
   }

   handleInput = ()=>{
       alert(this.state.k)
   }
 
   render() {
       return (
           <div>
               <button onClick={this.handleInput}>提交</button>
           </div>
       )
   }
}

//直接定义
import React, { Component } from 'react'
import './App.css'

export default class App extends Component {
    state = { k: "zhangsan" };

    handleInput = () => {
        alert(this.state.k)
    }

    render() {
        return (
            <div>
                <button onClick={this.handleInput}>提交</button>
            </div>
        )
    }
}

3.2 props

作用：组件间属性传递，用于父子间通信

import React, { Component } from 'react'
//子组件
export default class Test extends Component {
    handleClick =()=>{
        alert(this.props.name)
    }
    render() {
        return (
            <div>
                 <button onClick ={this.handleClick}>提交</button>
            </div>
        )
    }
}
//父组件
import React, { Component } from 'react'
import Test from './Test/Test'
import './App.css'

export default class App extends Component {

    render() {
        return (
            <div>
               <Test name="张三"/>
            </div>
        )
    }
}

props限制：prop-types

npm install prop-types
import PropTypes from 'prop-types';
.......
		 //添加限制
        Person.propTypes = {
            name: PropTypes.string.isRequired,
        }
        //添加默认值
        Person.defaultProps  = {
            age: 18
        }

3.3 refs

//1.通过string创建
import React, {Component} from 'react'
import './App.css'

export default class App extends Component {
    handleInput = ()=>{
        const  value =   this.refs.inputString.value;
        alert(value)
    }

    render() {
        return (
            <div>
              <input ref="inputString" placeholder="输入内容"/>
              <button onClick={this.handleInput}>提交</button>
            </div>
        )
    }
}

//2.通过回调函数创建
import React, {Component} from 'react'
import './App.css'

export default class App extends Component {
    handleInput = ()=>{
        const  {inputString} =   this;
        alert(inputString.value)
    }
    render() {
        return (
            <div>
              <input ref={c => this.inputString = c} placeholder="输入内容"/>
              <button onClick={this.handleInput}>提交</button>
            </div>
        )
    }
}

//3.通过React.createRef()创建
import React, {Component} from 'react'
import './App.css'

export default class App extends Component {
   myRef =  React.createRef();

    handleInput = ()=>{
        const  {myRef} =   this;
        alert(myRef.current.value)
    }

    render() {      
        return (
            <div>
              <input ref={this.myRef} placeholder="输入内容"/>
              <button onClick={this.handleInput}>提交</button>
            </div>
        )
    }
}

4. 生命周期

参考：https://www.jianshu.com/p/b331d0e4b398

5. react中使用axios

npm isntall axios --save

import axios from "axios";

6. react使用pubsubJS

1 react导入库
npm install pubsub-js --save

2 react 页面引入pubsubjs
import PubSub from 'pubsub-js'
3 pubsubjs使用
发送消息：PubSub.publish(名称,参数)
订阅消息：PubSub.subscrib(名称,函数)
取消订阅：PubSub.unsubscrib(名称)

7. 脚手架配置代理

1. 在package.json中追加如下配置

"proxy":"http://localhost:5000"

说明：

2. 优点：配置简单，前端请求资源时可以不加任何前缀。
3. 缺点：不能配置多个代理。
4. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

1. 在src下创建配置文件：src/setupProxy.js

2. 编写setupProxy.js配置具体代理规则：

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

module.exports = function(app) {
  app.use(
    proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    proxy('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

说明：

      /*
      	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
      	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
      */

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。

8. react路由配置

安装：  cnpm install react-router-dom --save

 import { BrowserRouter/HashRouter as Router, Route, Link } from "react-router-dom";
 
          <Router>
                <Link to="/">首页</Link>
                <Link to="/news">新闻</Link>
                <Link to="/product">商品</Link>

               <Route exact path="/" component={Home} />     //   exact表示严格匹配
               <Route path="/news" component={News} />    
               <Route path="/product" component={Product} />   
         </Router>

9. react向路由组件中传递参数

其他细节

1.list遍历时key问题：

2.多级路径刷新页面丢失：

3.阻止表单提交：

 event.preventDefault();