React基础与总结(持续更新)

1.1 安装

npm install --global create-react-app
create-react-app first_react_app
cd first_react_app
npm start
git clone [email protected]:ruanyf/react-demos.git

1.2 常用语法

​
let jsArr = ['A','B','C','D']
let vDOM = (
    

    {jsArr.map((item,index)=> 
{item}
)}
    
)
//let vDOM = 
hello react
ReactDOM.render(vDOM,document.getElementById('test'))
// 
hello,world
let vDOM = React.createElement('h2',{id:myID},React.createElement('span',{},'hello,world'))
ReactDOM.render(vDOM, document.getElementById('test1'))
​
//方式1: 工厂函数定义组件(简单组件/无状态)
function MyComponent() {
    console.log(this)//undefined
    return 
工厂函数组件(简单组件/无状态)
}
class MyComponent2 extends React.Component {
    //重写父类的render
    render(){
        console.log(this)//MyComponent2
        return 
ES6类组件(复杂组件/有状态)
    }
}
ReactDOM.render(,document.getElementById('example1'))
ReactDOM.render(,document.getElementById('example2'))
​
class Pig extends React.Component{
    //初始化状态
    state = {isPig:true}
    //自定义一个响应点击的函数
    handlerClick = ()=> {
      let isPig = !this.state.isPig
      //要更新状态，必须使用this.setState()
      this.setState({isPig})
    }
    //重写父类的render
    render(){
      let {isPig} = this.state
      //如下代码，在指定点击事件的时候，不要加()
      return 
{isPig?'佩奇是一头可爱的猪':'佩奇不是猪'}
    }
}
class Pig extends React.Component{
    constructor(props){
      super(props)
      this.state = {
        isPig:true
      }
      this.handlerClick = this.handlerClick.bind(this)
    }
    handlerClick(){
      let isPig = !this.state.isPig
      this.setState({isPig})
    }
    render(){
      let {isPig} = this.state
      return 
 {isPig?'佩奇是一头可爱的猪':'佩奇不是猪'}
    }
}
​
class Person extends React.Component{
    static propTypes = {
      name:PropTypes.string.isRequired,
      sex:PropTypes.string.isRequired,
      age:PropTypes.number
    }
    static defaultProps = {
      age:18
    }
    render(){
      let {name,age,sex} = this.props
      return (
        

          
姓名：{name}
          
性别：{age+1}
          
年龄：{sex}
          

        
      )
    }
  }
  
  let p1 = {
    name:'张三',
    age:19,
    sex:'男'
  }
​
  let p2 = {
    name:'李四',
    age:21,
    sex:'女'
  }
  
  //2.渲染组件标签
  ReactDOM.render(,document.getElementById('example1'))
  ReactDOM.render(,document.getElementById('example2'))
​
import React from 'react'
class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            soldiers : ['虎子','柱子']
        }
        this.addSoldier = this.addSoldier.bind(this)
    }
    addSoldier() {
        this.setState({
            soldiers : [...this.state.soldiers, '新兵'+Math.random()]
        })
    }
    render() {
        let boss = "李云龙"
        return (
            

                
独立团，团长{boss}
                <一营 老大="张大彪">
                增兵
                

                    {this.state.soldiers.map(v=>
{v}
)}
                
            
        )
    }
}
class 一营 extends React.Component {
    render() {
        return 
一营营长,{this.props.老大}
    }
}
js：this.props.history.replace('/')
    this.props.history.push('/')
render: 

2.3 整合antd

yarn add antd
yarn add react-app-rewired customize-cra babel-plugin-import
yarn add less [email protected]
yarn add react-router-dom

2.4 redux

Redux专注于状态管理，和react解耦，单一状态，单向数据流

reducer创建store，通过store.getState获取状态

状态变更，store.dispatch(action)来修改状态

reducer函数接受state和action，返回新的state，可以使用store。subscribe监听每次修改

import {createStore} from 'redux'
function counter(state=0, action){
    switch(action.type){
        case '加机关枪':
            return state + 1
        case '减机关枪':
            return state - 1
        default:
            return 10
    }
}
const store = createStore(counter)
const init = store.getState()
function listener() {
    const current = store.getState()
}
store.subscribe(listener)
store.dispatch({type:"加机关枪"})

2.5 redux整合react

react-redux优雅的链接react和redux
npm install redux-devtools-extension 并且开启
npm install redux-thunk --save
redux处理异步，需要redux-thunk插件 
使用applyMiddleware开启thunk中间件
action可以返回函数，使用dispatch提交action

2.6 react 跨越请求代理

#package.json: 最后一行添加
"proxy": "http://localhost:4000"

2.7 当你在 this.props 中找不到 history 时

import { withRouter } from 'react-router-dom'
@withRouter
class ...
https://www.jianshu.com/p/704b773b54fb

2.8 react-antd一些小问题

defaultSelectedKeys(只能匹配一次) ==> selectedKeys(可以多次匹配以最后一次为主)