<ul>     <li> <h3>Stateless function 无状态组件</h3> 平时写组件用到比较多的就是无状态组件，不但优雅，也是优化react性能的一种手段。 <pre>  <code class="language-javascript">const Greeting = ({ name, style }) => {      return <div style={style}>{name}</div>    };</code></pre> </li>    </ul>    <ul>     <li> <h3>Array as children 把数组数据渲染出来</h3> <p>经常会遇到处理数组数据的情况，可以用下面的方式简单的渲染出来。</p> <pre>  <code class="language-javascript">render() {        return (            (<ul>                {List.map((item) => (                     <li>{item}</li>                ))}            </ul>)        )         }</code></pre> </li>    </ul>    <ul>     <li> <h3>封装基础类组件</h3> <p>比如 <input type="text" > 每次写很麻烦吧，可以封装一个成一个组件</p> <pre>  <code class="language-javascript">const input = (props) => {        return <input type = {props.type} {...props} />    }</code></pre> </li>     <li> <h3>Layout Component 布局组件</h3> <p>组件可以分成很多类类，有的是布局类，有的是功能类。下面是一种布局类的组件。</p> <pre>  <code class="language-javascript"><FlexContainer>      <div style={{ flex: 1 }}>{this.props.leftSide}</div>      <div style={{ flex: 2 }}>{this.props.rightSide}</div>    </FlexContainer></code></pre> </li>    </ul>    <ul>     <li> <h3>Higher Order Component 高阶组件</h3> <p>高阶组件很像decorator，提升组件的能力。比如你想一些组件里面使用一下功能，react-router 中</p> <pre>  <code class="language-javascript">import { withRouter } from 'react-router'    withRouter(SomeComponent)</code></pre> <p>例子：</p> <pre>  <code class="language-javascript">var Enhance = ComposedComponent => class extends React.Component {      componentDidMount() {        this.setState({ name: "李狗子" });      }      render() {        return <ComposedComponent {...this.props} name = {this.state.name} />;      }    };</code></pre> </li>     <li> <h3>受控组件，不受控组件</h3> <p>项目中经常会用到这两种情况如：</p> <p>受控组件，更新的时候需要使用this.setState</p> <pre>  <code class="language-javascript">constructor() {        super();        this.state = {value: ""}    }    render() {        return <input type="text" value={this.state.value} />    }</code></pre> <p>不受控组件，主要需要通过ref来获取input的值。</p> <pre>  <code class="language-javascript">render() {        return <input type="text" ref="myInput" />    }</code></pre> <p>两种方法都可以在特定的场合去使用，个人觉得数据相对重要的页面需要使用受控组件会比较合适。</p> </li>     <li> <h3>使用三元表达式</h3> <p>项目中经常有判断语句，用三元表达式可以很方便的写出想要的逻辑</p> <pre>  <code class="language-javascript">const demo = ({ isOK }) => {        return isOK         ? <p> Yes </p>         : <p> No </p>    };</code></pre> </li>     <li> <h3>给setState传入function</h3> <p>可以使用function来更新state</p> <pre>  <code class="language-javascript">this.setState((prevState, props) => ({        return ...    }));</code></pre> </li>     <li> <h3>通过ref属性获取component</h3> <p>场景：下面的例子是初始化组件后，让input默认获取光标。ref最终指向的已经渲染好的DOM节点，或者是react class的实例。具体可以看官方的文档</p> <pre>  <code class="language-javascript">componentDidMount() {        this.input.focus();    }    render() {        return (            <input              ref={comp => { this.input = comp; }}            />        )    }</code></pre> </li>     <li> <h3>切勿使用...props传递数据</h3> <p>一个非常错误的做法比如：</p> <pre>  <code class="language-javascript"><Component {...props} /></code></pre> <p>props上面如果有非常多的属性，会造成非常昂贵的计算。正确的应该</p> <pre>  <code class="language-javascript"><Component name = { props.name } /></code></pre> </li>    </ul>    <p>以上是平时写React用到的一些写法小技巧，说有用还蛮有用的！</p>    <p> </p>    <h3>参考：</h3>    <p><a href="/misc/goto?guid=4959746930066862565" rel="nofollow,noindex">https://github.com/vasanthk/react-bits</a></p>    <p>react 代码规范</p>    <p><a href="/misc/goto?guid=4959746930153513633" rel="nofollow,noindex">https://github.com/airbnb/javascript/tree/master/react</a></p>    <p> </p>    <p>来自：https://juejin.im/post/58e641d60ce46300584c23fd</p>    <p> </p>