49
  1. Props in Initial State
  2. Refs over findDOMNode()
  3. HOC-over-mixins
  4. setState() in componentWillMount()
  5. Mutating State without setState()
  6. Using indexes as keys
  7. Spreading props on DOM elements

github地址:https://github.com/vasanthk/react-bits

下面开始讲解React Anti Patterns(反模式)

Props in Initial State

请勿把使用Props生成一个state,因为初始化来自props的state只会在第一次渲染时有效,之后props的变化不会动态改变UI


//错误的做法
class SampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
      inputVal: props.inputValue
    };
  }

  render() {
    return <div>{this.state.inputVal && <AnotherComponent/>}</div>
  }
}

//正确做法
class SampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false
    };
  }

  render() {
    return <div>{this.props.inputValue && <AnotherComponent/>}</div>
  }
}


Refs over findDOMNode()

请使用Refs代替findDOMNode(),简言之使用Refs有两种方式,一种是在html元素上写回调,另一种是直接写标识字符串。另外有一点要注意的是不要在组件上写Refs,而是写在Html元素上。


class MyComponent extends Component {
  componentDidMount() {
    this.node.scrollIntoView();
  }

  render() {
    return <div ref={node => this.node = node}/>
    //return <div ref="node"/>
  }
}

HOC-over-mixins

请使用高阶组件代替mixins,简言之把通用的功能包装成一个mixin,还不如封装成高阶组件实用。

setState() in componentWillMount()

避免在componentWillMount()中使用setState,因为因为异步操作在componentWillMount()不会导致重渲染,正确做法是在componentDidMount中调用异步操作


function componentDidMount() {
  axios.get(`api/messages`)
    .then((result) => {
      const messages = result.data
      console.log("COMPONENT WILL Mount messages : ", messages);
      this.setState({
        messages: [...messages.content]
      })
    })
}


Mutating State without setState()

突变State时不使用setState()是不理智的,因为那样无法导致重渲染。


 //错误做法
 handleClick() {
    //不要直接修改this.state.items数组
    this.state.items.push('lorem');
    this.setState({
      items: this.state.items
    });
  }

 //正确做法
 handleClick() {
    //要返回一个新数组
    this.setState({
      items: this.state.items.concat('lorem')
    });
  }

Using indexes as keys

避免在keys上使用indexs


//不推荐使用index
{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

//推荐返回唯一ID
{todos.map((todo) =>
  <Todo {...todo}
    key={todo.id} />
)}


Spreading props on DOM elements

避免在DOM上直接分离props,因为那样往往带来很多未知的html属性


//糟糕的做法
const Sample = () => (<Spread flag={true} className="content"/>);
const Spread = (props) => (<div {...props}>Test</div>);

//正确的做法
const Sample = () => (<Spread flag={true} domProps={{className: "content"}}/>);
const Spread = (props) => (<div {...props.domProps}>Test</div>);


转载原创文章请注明,转载自: 老赵茶馆 » React的模式,技术,技巧–03

留言

Loading...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. 喜帖街 谢安琪
  2. 猫の恩返 室内管弦楽団
Pluto主题Github源码公开
为学习交流,本主题源码已在Github公开,支持请购买正版。