项目实践

    <Link
      to="/target"
      className={classNames("box flex aic fdc", { on: curr === "02" })}
    > 
      <img src={curr === "02"?mudiing:mudi} alt="" />
      <div className="text mt-5 f999">目的地</div>
    </Link>
    <Link
      to="/need"
      className={classNames("box flex aic fdc", { on: curr === "03" })}
    >
      <img src="assest/img/tijiao.png" alt="" />
      <div className="text mt-5 f999">提交需求</div>
    </Link>
    <Link
      to="/discover"
      className={classNames("box flex aic fdc", { on: curr === "04" })}
    > 
      <img className="mt-5" src={curr==='04'?xingqiuing:xingqiu} alt="" />
      <div className="text mt-5 f999">发现</div>
    </Link>
    <Link
      to="/my"
      className={classNames("box flex aic fdc", { on: curr === "05" })}
    > 
      <img src={curr==='05'?wodeing:wode} alt="" />
      <div className="text mt-5 f999">我的</div>
    </Link>
    <Link
      to="/demo"
      className={classNames("box flex aic fdc", { on: curr === "06" })}
    >
      <img src="assest/img/wode.png" alt="" />
      <div className="text mt-5 f999">demo</div>
    </Link>
  </div>
</div>

); }

<a name="FswRF"></a>
## (六) 导入ant-design
[https://mobile.ant.design/docs/react/introduce-cn#3.-%E4%BD%BF%E7%94%A8](https://mobile.ant.design/docs/react/introduce-cn#3.-%E4%BD%BF%E7%94%A8)
1. 安装依赖 `npm install antd-mobile --save`
1. 复制以下代码,放入 public/index.html的头部
```html
 <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>

1. 在根目录的index.js, 添加antd的样式文件

   import 'antd-mobile/dist/antd-mobile.css';

2. 使用 ```html import React from “react”; import { Button } from ‘antd-mobile’;

export default function() { return 测试 }

<a name="ce1Gr"></a>
## (七) 路由跳转和传参
路由跳转：
```javascript
1. 使用 <Link to="xxx" />
2. 使用history
 - 如果是class组件， 使用this.props.history.push();
 - 函数组件则使用hooks
import {useHistory} from 'react-router';
let history = useHistory();
history.push();

(1) 动态路由传参

1. <Route path="/demo/:id" component={Demo} />
2. <Link to="/demo/22222" />
3. {props.match.params.id} ```html // 从其他页面跳转到 /demo import { useHistory } from “react-router-dom”; export default function () { const history = useHistory(); const goto = () => { history.push(“/demo/2222”); }; return (
   动态路由
   ); }

// 路由配置 app.js

// demo.jsx import React from ‘react’;

export default function(props) { console.log(props); return(

) }

<a name="bvz00"></a>
##### (2) query传参(页面刷新后参数不存在)
```jsx
// 核心代码
 history.push({
      pathname: '/my',
      query:{
        username: 'zs',
        age: 100
      }
    })
// 接收
props.location.query;

// app.js的路由配置
<Route path="/demo" component={Demo} />
// 其他页面
import { useHistory } from "react-router-dom"; 
export default function () {
  const history = useHistory();
  const goto = () => {
    history.push({
        pathname: '/demo',
        query: {
            username: '法外狂徒'
        },
        state: {
            age: 1000
        }
    });
  };
  return (
    <div>
      <button onClick={goto}>query&state</button> 
    </div>
  );
}
// 接收参数
// query传参刷新页面就没有了,要主要使用&&以防报错
import React from "react";
export default function (props) { 
  let { query, state } = props.location;
  return (
    <div className="demo-index">
      <p> query参数: {query && query.username}</p>
      <p> state参数: {state.age}</p>
    </div>
  );
}

(3) state传参(页面刷新后参数还存在)

// 核心代码
 history.push({
      pathname: '/my',
      state:{
        username: 'zs',
        age: 100
      }
    })
// 接收
props.location.state;

(4) search传参

(八) redux

详见使用redux共享状态一文

(九) 性能优化PureComponent和useMemo

1. 类(class)组件性能9优化可以使用shouldCompoentUpdate进行优化

   // nextProps下一个属性(新的属性),nextState下一个状态(新的状态)   
   shouldComponentUpdate(nextProps, nextState) { 
    // 根据新的属性或者状态决定要不要更新页面
   if(xxx) {
       return true;
    } else {
       return false
   }
   }

2. 类(class)组件, 可以让其继承React.PureComponent来实现优化

   import React from "react"; 
   class Demo extends React.PureComponent {
   constructor(props){
    super(props);
   } 
   render() {
    console.log(this.props);
    return (<div>性能优化</div>)
   }
   } 
   export default Demo;

3. 函数组件可以使用React.memo进行包装以实现优化

   import React from "react";
   function Scene(props) { 
   return <div>{props.name}</div>;
   }
   export default React.memo(Scene);

   https://www.jianshu.com/p/b3d07860b778