React-tips Summary

2018-07-02

阅读量

1. react 中引入图片

1 2	本地：<img src={require('xxx.jpg')} /> 外链：<img src={'imgurl'} />

2. 关于_.throttle 与 setState 冲突失效问题
原因：因为每当 setState 时会重新 render 一次，每次都会重新执行 throttle 函数
解决：将节流放到 constructor 里，因为在 constructor 中只会执行一次

1	this.throttleSearch = _.throttle( this.Search, 800 );

3. react-router

react 获取路由参数
通过 this.props.params.id 获取路由中 /:id
新版 this.props.match.params.id 获取路由中 /:id
<Route>组件]
render methods 分别是： component、render、children
props 分别是：match、location、history

4. browserHistory

browserHistory.goBack() 返回上一页
browserHistory.push时如何优雅地传参
- 传参方式1：将参数直接写在路径中，前提是router定义时，需要指定参数的名字，这里假定为:value;
  browserHistory.push(pathname: '/routerName/123');
  通过this.props.params.value即可获取
- 传参方式2：通过state传参，可以在页面跳转时，url中不显示参数；
  browserHistory.push(pathname: '/routerName',state: { key: value });
  通过this.props.location.state.key便可以获得state中的key的value;

路由跳转问题

//老写法会产生更新警告warning
this.props.history.push(`${MOTHER_PAGE_URL}`);

//用 browserHistory 代替 history
import { browserHistory } from 'react-router';
browserHistory.push(`${MOTHER_PAGE_URL}`);

//或者 必须验证router的类型，否则会报错
static contextTypes = {    
  router: React.PropTypes.object.isRequired
};
componentDidMount() {
  //原来的写法    
  this.props.history.push(`/`)    
  //现在的写法    
  this.context.router.push(`/`)
}

5. react 中使用echarts

echarts X轴坐标文字显示不全 – 在 xAxis 中添加配置

xAxis: {
  axisLabel:{
    interval:0,//横轴信息全部显示
    rotate:-30,//-30度角倾斜显示
  }
}

echarts 柱状图 legend 数据改变后，他的页码不变，但是旧数据有三页，新数据就两页，数据改变后还留在第三页，但是第三页没数据，所以显示空白
解决方法：实例先clear，再setOption
echart 线图柱图溢出部分包含
grid: {containLabel: true}
react 中实现初始化时只绑定一次dom
在初始化图标，setOption 前
if (!this.myChart) this.myChart = echarts.init(this.chartRef);

在柱状图中，tooltip 上显示多个数据，配置 formatter 为一个函数，在 series 的 data 中添加 tooltip 中使用的参数对象

this.myChart.setOption({
  ...options,
  tooltip: {
    trigger: 'axis',
    formatter: (data) => {
      data = data[0].data.tooltip;
      return `${data.foodName}<br/>
      - 提及次数: ${data.foodMentionCount}次<br/>
      - 点赞次数: ${data.thumbsUpCount}次<br/>
      - 点赞率: ${data.thumbsUpRate}`
    }
  },
  series: [{
    ...options,
    data: thumbsUpDataList.map(item => ({
      value: item.thumbsUpCount,
      tooltip:{
        foodName: item.foodName,
        foodMentionCount: item.foodMentionCount,
        thumbsUpCount: item.thumbsUpCount,
        thumbsUpRate: item.thumbsUpRate
      },
    }))
  }],
})

6. react 的 event.persist()
异步事件队列合并就是让你在异步中能拿到事件对象

7. react-datetime

中将语言设置为中文

//将语言设置为中文
import 'moment/locale/zh-cn';
<Datetime locale="zh-cn" />

//input 只读设置
inputProps={{placeholder: '请输入时间',readOnly: true}}

8. h5自定义属性data-* 及react 的 innerHTML

<li
  key={item.code}
  data-value={item.code}
  data-name={item.name}
  dangerouslySetInnerHTML={{__html: item._name_}}
  onClick={e => {
    const $curTar = $(e.currentTarget);
    const value = $curTar.data('value');
    const name = $curTar.data('name');
    this.setState({
      accountBank: value,
      accountBankName: name
    })
  }}
></li>

9. react 绑定 this 的几种方式

在 render 中直接 bind <button onClick={ this.handleClick.bind(this) }>Say Hello</button> 缺点：在每次渲染时都要重新绑定
在 constructor 中 bind this.handleClick = this.handleClick.bind(this) 优点：仅需要绑定一次
使用es6语法+箭头函数在 constructor 中赋值 this.handleClick = (e) => {console.log(this.state.message)}
使用es7语法+箭头函数在 class 中直接赋值 handleClick = (e) => {console.log(this.state.message)}
- 在 react 中使用 es7 箭头函数的方法来绑定 this
  npm i babel-preset-stage-0 -D
  在 .babelrc 中 presets 添加 “stage-0” 即可

10. react 30 天

11. componentWillReceiveProps
组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

componentWillReceiveProps(nextProps) {
  if (nextProps.bool) {
    this.setState({
      bool: true
    });
  }
}

12. 使用 create-react-app

npm install -g create-react-app
- create-react-app my-app
- cd my-app
- npm start
修改端口：node_modules\react-scripts\scripts\start.js
在node_modules文件夹里面搜索react-scripts，之后可以在该文件夹下看到scripts文件夹。在start.js里面找到端口号并修改。
显示隐藏 webpack 配置：npm run eject (不可逆)