平时写react 小技巧，不错哟~

Github: github.com/aototo/blog
喜欢文章的朋友star 支持一下，长期更新...毫不偷懒

• Stateless function 无状态组件

  平时写组件用到比较多的就是无状态组件，不但优雅，也是优化react性能的一种手段。

  const Greeting = ({ name, style }) => {
      return <div style={style}>{name}</div>
    };复制代码

• Array as children 把数组数据渲染出来

  常常会遇处处理数组数据的状况，能够用下面的方式简单的渲染出来。

  render() {
        return (
            (<ul> {List.map((item) => ( <li>{item}</li> ))} </ul>)
        )     
    }复制代码

• 封装基础类组件

  好比 <input type="text" > 每次写很麻烦吧，能够封装一个成一个组件

  const Input = (props) => {
        return <input type = {props.type} {...props} /> }复制代码

• Layout Component 布局组件

  组件能够分红不少类类，有的是布局类，有的是功能类。下面是一种布局类的组件。

  <FlexContainer>
      <div style={{ flex: 1 }}>{this.props.leftSide}</div>
      <div style={{ flex: 2 }}>{this.props.rightSide}</div>
    </FlexContainer>复制代码

• Higher Order Component 高阶组件

  高阶组件很像decorator，提高组件的能力。好比你想一些组件里面使用一下功能，react-router 中

  import { withRouter } from 'react-router'
    withRouter(SomeComponent)复制代码

  例子：

  var Enhance = ComposedComponent => class extends React.Component {
      componentDidMount() {
        this.setState({ name: "李狗子" });
      }
      render() {
        return <ComposedComponent {...this.props} name = {this.state.name} />; } };复制代码

• 受控组件，不受控组件

  项目中常常会用到这两种状况如：
  受控组件，更新的时候须要使用this.setState

  constructor() {
        super();
        this.state = {value: ""}
    }
    render() {
        return <input type="text" value={this.state.value} /> }复制代码

  不受控组件，主要须要经过ref来获取input的值。

  render() {
        return <input type="text" ref="myInput" /> }复制代码

  两种方法均可以在特定的场合去使用，我的以为数据相对重要的页面须要使用受控组件会比较合适。

• 使用三元表达式

  项目中常常有判断语句，用三元表达式能够很方便的写出想要的逻辑

  const demo = ({ isOK }) => {
        return isOK 
        ? <p> Yes </p> 
        : <p> No </p>
    };复制代码

• 给setState传入function

  可使用function来更新state

  this.setState((prevState, props) => ({
        return ...
    }));复制代码

• 经过ref属性获取component

  场景：下面的例子是初始化组件后，让input默认获取光标。ref最终指向的已经渲染好的DOM节点，或者是react class的实例。具体能够看官方的文档

  componentDidMount() {
        this.input.focus();
    }
    render() {
        return (
            <input ref={comp => { this.input = comp; }} /> ) }复制代码

• 切勿使用...props传递数据

  一个很是错误的作法好比：

  <Component {...props} />复制代码

  props上面若是有很是多的属性，会形成很是昂贵的计算。正确的应该

  <Component name = { props.name } />复制代码

---

以上是平时写React用到的一些写法小技巧，说有用还蛮有用的！

有错误的地方还请指正！谢谢你们。

下面2个连接都很棒哦！记得收藏star...

参考：

github.com/vasanthk/re…

react 代码规范

github.com/airbnb/java…