react学习笔记

1.定义组件的方式

通过函数定义：

//通过props获取组件传来的参数
function App(props){
    return <div>props.name</div> 
}

<App name="aaa"></App>

通过class定义

class App extends React.Component{
    render(){
        let {name,age,children}=this.props //通过this.props获取组件携带的参数
        return (<div>{children}我的姓名是：{name},我的年龄是{age}</div>)
    }
}

<App name="aaa" age="18"><p>大家好</p></App>

2.生命周期

componentWillMount //组件挂载前
componentDidMount  //组件挂载后
componentWillUpdate //组件更新前
componentDidUpdate  //组件更新后
componentWillUnmount //组件卸载

3.事件的写法

class App extends React.Component{
    constructor(){
        super()
        this.handleClick1=this.handleClick1.bind(this)
    }
    handleClick0(){}
    handleClick1(){}
    handleClick2=()=>{}//常用
    handleClick3(index){} //可以这样得到参数
    render(){
         return (
            <div>
            <button onClick={this.handleClick0.bind(this)}></button>
            <button onClick={this.handleClick1}></button>
            <button onClick={this.handleClick2}></button>
             <button onClick={()=>this.handleClick3(index)}></button>
            </div>
        )
    }
}

4.表单

 class FormList extends React.Component {
        constructor() {
            super()
            this.state={name: '',age:''}
        }
        handleSubmit =()=>{
            alert('输入的为' + this.state.name)
            event.preventDefault();
        }
        handleChange=(e)=>{
            var val=e.target.value;
            var name=e.target.name
            console.log(val)
           //在ES6中，把属性名用[ ]括起来，则括号中就可以引用提前定义的变量。
            this.setState({
                [name]: val
            })
        }
        render() {

            return (<form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input name="name" type="text" value={this.state.name} onChange={this.handleChange}/>
                </label>
                <label>
                    age:
                    <input name="num" type="text" value={this.state.num} onChange={this.handleChange}/>
                </label>
                <input type="submit" value="Submit"/>
            </form>)
        }
    }
    ReactDOM.render(<FormList/>, document.querySelector('#app'))

5.组件传值

1.父传子通过this.props
    
   class Children extends React.Component{
      render(){
            return <div>{this.props.name}</div>
      }  
    }
   
    class Parent extends React.Component{
        constructor{
            super()
            this.state={name:'我是父亲的数据'}
        }
        render(){
            return (<Children name={this.state.name}/>)
        }
    }
  2.子传父 通过子组件调用父组件的方法 

     class Children extends React.Component{
        constructor(){
            super()
            this.state={
                son:'我是子组件的数据'
            }
        }
        componentWillMount(){
            this.props.aaa(this.state.son)
        }
        render(){
            return (<div></div>)
        }
    }
    class Parent extends React.Component{
        constructor(){
            super()
            this.state={
                msg:''
            }
        }
        parentFn=(msg)=>{
            this.setState({
                msg
            })
        }
        render(){
            return (<div>
                {this.state.msg}
                <Children aaa={this.parentFn}></Children>
            </div>)
        }
    }

6.获取react元素

//1.refs的使用
<input type="text" ref='inp' />

this.refs.inp.value //这样就可以获取到input的值

//2.回调函数的形式
<input type="text" ref={input=>this.input=input} />

this.input.value //这样同样可以获取到input的值

7.新增的contextApi（状态管理）

A->B->C->D如果我们想让A组件的数据传到D组件供D组件使用的话  不考虑使用redux的情况该怎么实现呢？

我们可以将A组件的数据通过props传给B 然后B再通过props传给C C再通过props传给D 这样是可以实现  但是是不是太繁琐了....

重点来了  我们的react16.3.0版本（所以版本是16.3.0以上的版本才可以使用这个api）新增了一个contextApi 可以集中管理状态  

import  React,{Component,createContext} from 'react';
import ReactDom from 'react-dom'
let {Provider,Consumer}= createContext() //Provider 状态的提供者 Consumer状态的使用者
class ProviderComponent extends React.Component{
    state={
        a:1,
        b:2
    }
    changeA=(a)=>{
        this.setState({a})
    }
    render(){
        return (<Provider value={{state:this.state,onChange:this.changeA}}>//注意这个value命名是不能改的  下面的形参可以随便命名
            {this.props.children}
        </Provider>)
    }
}
class Child extends React.Component{
    render(){
        return<div>
            <Consumer> //Consumer 里面放函数  
                {(value)=>
                   <div>
                       <h3>{value.state.a}</h3>
                       <button onClick={()=>value.onChange(10)}>改变a的值</button>
                   </div>
                }
            </Consumer>
        </div>
    }
}
class App extends React.Component{
    render(){
        return (<div>
            <Child></Child>
        </div>)
    }
}
ReactDom.render(<ProviderComponent><App></App></ProviderComponent>,document.querySelector('#root'))

8.路由

重点来了~

     先说简单路由

//react-router-dom需要下载
import {BrowserRouter,Switch,Link,Route} from 'react-router-dom'

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

class Header extends React.Component{
    render(){
        return (<div>
                    <Link to="/">首页</Link>
                    <Link to="/about">关于</Link>
                    <Link to="/me">我的</Link>
                </div>)
    }
}

class Main extends React.Component{
    render(){
        return (<div>
                    <Switch> //每次只允许一个Route展示 exact是精确展示
                        <Route exact path="/" component={Home} /> 
                        <Route path="/about" component={About} />
                        <Route path="/me" component={Me} />
                    </Switch>
                </div>)
    }
}

ReactDom.Render(<App/>,document.getElementById('app'))

     再说一下嵌套路由

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Switch, Link, Route, NavLink, Redirect} from 'react-router-dom'
import './index.css'
let List=[
    {id:1, name:'aaa', sex:'男', age:6},
    {id:2, name:'bbb', sex:'男', age:12},
    {id:3, name:'ccc', sex:'女', age:5},
    {id:4, name:'ddd', sex:'男', age:10},
]

//NavLink 可以加选中样式 可以用activeClassName 也可以用activeStyle={{color:'red'}}
class Nav extends React.Component{
    render() {
        return (
            <div>
                <NavLink to='/home'  className="link" activeClassName='active'>首页</NavLink>
                <NavLink to='/about' className="link" activeClassName='active'>关于</NavLink>
                <NavLink to='/stu' className="link" activeClassName='active'>学生</NavLink>
            </div>
        );
    }
}
class NotFound extends React.Component{
    state={
        time:5
    }
    componentDidMount(){
       this.timer= setInterval(()=>{
            this.setState({
                time:this.state.time-1
            })
            if(this.state.time==0){
               //路由组件都有this.props属性  里面有history等对象
               this.props.history.push('/home')
            }
        },1000)
    }
    componentWillUnmount(){
        clearInterval(this.timer)
    }
    render() {
        return (
            <div>
                {`页面不存在，${this.state.time}s，返回主页`}
            </div>
        );
    }
}
// 内容 Redirect 重定向         
class Mian extends React.Component{
    render() {
        return (
            <div>
               <Switch>
                   <Route path='/home' component={Home}></Route>
                   <Route path='/About' component={About}></Route>
                   <Route exact path='/stu' component={Stu}></Route>
                   <Route path='/stu/:id' component={StuInfo}></Route>
                   <Redirect exact from='/' to='/home'></Redirect>
                   <Route component={NotFound}></Route>
               </Switch>
            </div>
        );
    }
}
class Home extends React.Component{
    render() {
        return (
            <div>
                我是首页
            </div>
        );
    }
}
class About extends React.Component{
    render() {
        return (
            <div>
                我是关于
            </div>
        );
    }
}
class StuInfo extends React.Component{
    render() {
        let {id}=this.props.match.params
        let itemInfo=List.find((item)=>{
            return item.id==id
        })
        return (
            <div>
               <p>{itemInfo.id}</p>
               <p>{itemInfo.name}</p>
               <p>{itemInfo.age}</p>
            </div>
        );
    }
}
class Stu extends React.Component{
    render() {
        return (
            <div>
                {
                    List.map((item,index)=>{
                        return <Link key={item.id} to={`/stu/${item.id}`}>{item.name}</Link>
                    })
                }
            </div>
        );
    }
}
class App extends React.Component{
    render() {
        return (<div>
            <Nav></Nav>
            <Mian></Mian>
        </div>)

    }
}
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));