react基础入门级学习总结

react基础入门级学习总结

组件

​ 对于react来说核心是组件，声明组件有两种方式，**一种是通过类创建，一种是通过函数创建。**通过类创建的组件中可以放状态，这类组件叫有状态组件。通过函数创建的组件不可以放状态，这类组件叫无状态组件。

通过类创建一个组件：
<script type="text/babel">
    class MyHeader extends React.Component{
        render(){    // 需要返回一个jsx
            return(
                <div>
                    <h1>这是一个头部组件</h1>
                </div>
            )
        }
    }
    ReactDOM.render(<MyHeader/>,document.getElementById("root"));
</script>

通过函数创建一个组件：
    <script type="text/babel">
        function Header(){
            return(
                <div>
                    <h1>我是header组件</h1>
                </div>
            )
        }
        ReactDOM.render(<Header />,document.getElementById("root"))
    </script>

生命周期

​ 上面说到组件，那就需要了解到组件的生命周期。旧版的生命周期与新版的生命周期有所不同。

旧版生命周期

• (initialization)初始化阶段

  通过constructor初始化属性和状态。

• (mounting)挂载阶段

  把虚拟dom转成真实dom 挂载到页面上。

  componentWillMount 组件挂载之前调用，可能调用很多次。

  render 组件挂载 状态或者属性发生一次变化就会调用一次render。

​ componentDidMount 组件挂载完毕，永远执行一次，可以在这里发送ajax请求，也可以在这里获取dom元素。

• (updation)更新阶段

  componentWillReceiveProps 组件收到属性的时候，将会调用这个钩子，首次渲染不会触发。

​ shouldComponentUpdate 参数：接受的新数据 询问组件是否更新，不写这个钩子默认返回true，写了就要指明返回什么。

​ componentWillUpdate 组件更新前调用。

​ render 组件更新后重新渲染组件。

​ componentDidUpdate 组件更新后调用。

• (unmounting)卸载阶段

  componentWillUnmount 组件卸载前调用

新版生命周期

​新版的生命周期废弃了 componentWillMount 、componentWillUpdate 、componentWillReceiveProps 三个钩子，添加了getDerivedStateFromProps getSnapshotBeforeUpdate 两个钩子。

• 创建阶段

  constructor: 初始化属性和状态

  getDerivedStateFromProps: 传递的属性映射成状态 静态方法 可以把属性映射成状态

  render: 挂载（渲染）组件

  componentDidMount:组件挂载完毕

• 更新阶段

  getDerivedStateFromProps:传递的属性映射成状态 静态方法 可以把属性映射成状态

  shouldComponentUpdate: 询问组件是否更新

  render: 渲染 挂载组件

  getSnapshotbeforeUpdate:获取更新前的一个快照

  componentDidUpdate: 组件更新完成

• 卸载阶段

  componentWillUnmount 组件卸载之前调用

路由

基本路由之BrowserRouter或HashRouter的使用：

​ <BrowserRouter />或 <HashRouter />包在根组件外面。作用：让根组件以及所有的子组件都可以使用路由。

BrowserRouter: 就类似于是history路由模式，HashRouter: 就类似于是hash路由模式

可以给BrowserRouter或HashRouter起别名：

import { HashRouter as Router } from "react-router-dom"

<Link>的使用：

​ 也是react-router-dom中的提供的组件，类似于vue中的router-link，是用来实现路由导航的。

 <li><Link to="/home">首页</Link></li>

 <li><Link to="/about">关于</Link></li>

<Route />设置匹配规则以及路由的出口：

  <Route path="/home"><Home /></Route>

  <Route path="/about"><About /></Route>

路由的嵌套 NavLink

​ <Link>组件功能比较弱，在React-router-dom中，还提供了一个组件，叫<NavLink />。

这个<NavLink>我们可以设置点击时的样式

 <NavLink className="nav-item" activeClassName="selected" to="/home">首页</NavLink>

Switch组件

​ 渲染第1个与当前访问地址区域的<Route>或<Redirect>。

Redirect组件

<Redirect path="/" to="/home"></Redirect>

对错误url处理方式有两种方式：

1）只要url错误，直接重定向到某个路由下：

<Redirect path="*" to="/home"></Redirect>  这个path="*" 可以不写

2）需要写一个404组件，如果url匹配不到，渲染404组件

 <Route path="*" component={NotFount}></Route>