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.setStateconstructor() { 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...
参考:
react 代码规范