react+redux+hooks+next+koa学习笔记

使用vscode安装插件 Simple React Snippets

react基础

安装脚手架 react

npm install -g create-react-app  //安装脚手架
mkdir ReactDemo  //创建ReactDemo文件夹
create-react-app demo01   //用脚手架创建React项目
cd demo01   //等创建完成后，进入项目目录
npm start   //预览项目，如果能正常打开，说明项目创建成功

注意事项

1. 循环key值

{
    this.state.list.map((item,index)=>{
        return <li key={index+item}>{item}</li>
    })
}

2. 绑定html渲染 用 dangerouslySetInnerHTML ，这样就可以解析html了

<li 
     key={index+item}
      onClick={this.deleteItem.bind(this,index)}
      dangerouslySetInnerHTML={{__html:item}}
  >
  </li>

3. <label>标签 中的for改用htmlFor

<div>
    <label htmlFor="jspang">加入服务：</label>
    <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
</div>

4. 父子组件传值

//父组件
<children content={item} />

//子组件用this.props接收父组件传过来的content值
 <div>{this.props.content}</div>

5. 子组件向父组件传值

//子组件接收父组件的方法并传值给父组件方法
<div onClick={this.handleClick}>{this.props.content}</div>

handleClick(){
      this.props.deleteItem(this.props.index)
    }

父组件

<XiaojiejieItem 
     key={index+item}  
      content={item}
      index={index}
      deleteItem={this.deleteItem.bind(this)}  //关键代码  传递父组件的方法 
      />

类似vue中的this.$emit

6. react是单向数据流，要想改变父组件中的数据就按照5操作
7. 在面试React时，经常会问道的一个问题是：函数式编程的好处是什么？
   函数式编程让我们的代码更清晰，每个功能都是一个函数。
   函数式编程为我们的代码测试代理了极大的方便，更容易实现前端自动化测试。
8. react的调试工具 React developer tools
9. 引入import PropTypes from 'prop-types'校验 组件传值propTypes

//子组件接收父组件的参数 用propTypes
 children.propTypes={
    content:PropTypes.string,
    deleteItem:PropTypes.func,
    index:PropTypes.number,
    name:PropTypes.string.isRequired    //必传
}

10. 获取dom e.target ，也可以用ref代替

<input 
    id="jspang" 
    className="input" 
    value={this.state.inputValue} 
    onChange={this.inputChange.bind(this)}
    ref={(input)=>{this.input=input}}   //绑定DOM
    />
    
inputChange(){
    this.setState({
        inputValue:this.input.value    //this.input 获取dom
    })
}

12. ref使用中的坑

<ul ref={(ul)=>{this.ul=ul}}>
    {
        this.state.list.map((item,index)=>{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item}
                index={index}
                deleteItem={this.deleteItem.bind(this)}
                />
            )
        })
    }
</ul>

因为setState是一个异步函数，所以，如果添加数据到list中获取dom是不准的

addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:''
        //关键代码--------------start
    },()=>{
        console.log(this.ul.querySelectorAll('div').length)
    })
    //关键代码--------------end
}

npm install xxx: 安装项目到项目目录下，不会将模块依赖写入devDependencies或dependencies。

npm install -g xxx: -g的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm cinfig prefix的位置

npm install -save xxx：-save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

npm install -save-dev xxx：-save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

作为一个前端，要清楚的知道npm install这四种用法，防止项目依赖错误，在别人下载你的代码没办法跑起来。

redux基础

redux转我的上篇博客

reactRouter基础

安装Router npm install --save react-router-dom
引入router

import {BrowserRouter as Router, Route,Link} from 'react-router-dom'

在最外层用Router把整个标签包裹起来

render() {
    return (
      <Router>
        <div className="App">
          <Link to="/">Home</Link>
          <Link to="/About/123">About</Link>   //后面的123是参数内容
          <Link to="/Product">Product</Link>
          <hr/>
          <Route path="/" exact component={Home}></Route>  //component 中是引入的组件  exact 是精确匹配'/'
          <Route path="/about/:id" component={About}></Route>  // :id  要传的参数对应上面的123
          <Route path="/product" component={Product}></Route>
        </div>
      </Router>
    );
  }

参数的接收
用this.props接收参数和父子组件传参一样都是props接收

componentDidMount(){
    this.setState({
       id:this.props.match.params.id
    })

}

进入页面直接跳转到某个路由，可以在constructor加上如下代码

constructor{
  this.props.history.push('/view/flutter')    //回跳到该路由 ，感觉跟重定向有点像
}

路由的重定向 标签式重定向
想把Index.js中的列表默认进入页面就重定向到home.js
可以在路由router.js列表中增加

<Route  path='/home' component ={Home} ></Route>

然后在Index.js中增加

import { Link , Redirect } from "react-router-dom";
<Redirect to="/home' />

进入首页列表就会显示home页面的内容
此时url也变成了 ‘/home’ ,这个一般在做活动的时候临时使用
编程式重定向 在constructor中增加一句

this.props.history.push("/home/");  

动态路由配置，直接map循环list列表

1. 获取路由列表
2. map动态循环

let routeConfig =[
      {path:'/',title:'博客首页',exact:true,component:Index},
      {path:'/video/',title:'视频教程',exact:false,component:Video},
      {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
    ]
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    {
                      routeConfig.map((item,index)=>{
                          return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
                      })
                    }
                </ul>
            </div>
            <div className="rightMain">
                    {
                      routeConfig.map((item,index)=>{
                          return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
                      })
                    }

            </div>
          </div>
      </Router>
    );

React Hooks