javascript - reactjs 中的反模式到底是什么？

Question

假设我有一个父组件。

Parent.js

class Parent extends React.Component {

  someMethod () {
    LoadDataforChild();
  }

  render() {

    return (
      <div>
        <Child someMethod={this.someMethod}/>
      </div>
    );
  }
}

export default Parent;

Child.js(Child是纯组件)

class Child extends React.Component {

  componentWillMount() {
    this.props.someMethod();
  }

  render() {
    return (
      <div>
        Hello child
      </div>
    );
  }
}

我完全不知道 react 中的反模式。我在 Child(纯组件)中调用了父方法。这是反模式吗？就父组件和子组件而言，反模式到底是什么？

Answer 1

将你的问题扩展到 reactjs 中的反模式，我想根据 off.docs、文章和我自己的经验尽可能广泛地回答:

• 不要将组件存储在组件状态或商店(例如 redux 商店)中

    //REDUX REDUCER
    const initialState = {
        isHOCOpened: false,
        child: null
      }

    export default reducer = (state = initialState, {type, content}) => {
        switch (type) {
          case ('openHOC'): {
            const updatedState = {...state};
            updatedState.isHOCOpened = true;
            updatedState.child = content;
            return {
              ...state, ...updatedState
            }
        ...
    }

    //PARENT COMPONENT
    ...some other imports;
    import  ChildElement from './ChildElement';
    export default class ParentElement extends Component {
      ...some code...
      render() {
        const { openHOC, HOCcontent } = this.props;
        return (
          <div onClick={()=>this.openHOC(<ChildElements/>)}>
            <HOCElement/>
          </div>
    }

    //HIGHER ORDER COMPONENT
    export default const HOC = ({isHOCOpened, child}) => {
      ...some code...
      return (
        <div>
          {isOpened && {children}}
        </div>
      )
    }

推荐的方式是

    ...some other imports;
    import  ChildElement from './ChildElement';
    export default class ParentElement extends Component {
      state = {
        isHOCOpened: false,
      }

      openHOC = () => this.setState({openHOC: true});

      render() {
        return (
          <div onClick={this.openHOC}>
            {isOpened && <HOCElement/><ChildElement/></HOCElement>}
          </div>
      }
    }

    ...
    export default const HOC = ({children}) => {
      ...some stuff...
      return (
        <div>{children}</div>
      )

组织您的应用逻辑，避免将组件存储在 state/store 中；

• 不要像上面那样在事件中传递 setState 权利:

    onClick={() => {
      //some code
      this.setState({isOpened: true})
    }

最好把它拿走事件并像之前的例子那样单独存储它:

      openHOC = () => {
        //some code
        return this.setState({openHOC: true})
      };

      render() {
        return (
          <div onClick={this.openHOC}>
            {isOpened && <HOCElement/><ChildElement/></HOCElement>}
          </div>
      }

它会影响性能，因为它每次都创建函数，但这涉及到对 JS 的整体理解，仅对 ReactJS。查看文章以更深入地讨论 this .;

• 不要在每次传递 props 变量时都进行绑定(bind)，如果您将它链接到要执行变量的环境:

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          name: ''
        };
      }

      updateValue(evt) {
        this.setState({
          name: evt.target.value
        });
      }

   render() {
    return (
      <form>
        <input onChange={this.updateValue.bind(this)} value={this.state.name} />    
      </form>
    )
      }
    }

而是在构造函数中绑定(bind)所有变量:

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          name: ''
        };
        this.updateValue = this.updateValue.bind(this);
    }

• 不要使用索引作为键属性:

    <ul>
      {liArray.map( (e,i) => <li key={i}>{e.text}</li>}
    </ul>

这不完全是反模式，而是直接的错误代码和意想不到的结果。因为它在 off docs 中写了很多次, React 使用 Keys 来跟踪 DOM 树的变化并重绘它，所以 Keys 必须是唯一的，尽管索引是它的数组位置的变化；将独特的 Prop 作为 ID 或其他任何东西 {liArray.map(e => <li key={e.id}>{e.text}</li>}

• 还有一个反模式不要在 setState 中正确计算值: setState({value: this.state.counter + passedValue})在调用 setState 之前执行以下操作:

    updateValue(passedValue) {
       const result = this.state.counter + passedValue;
       setState({value: result})
    }

• 不要在 setState 后面传递函数 期望在 setState 之后立即执行它:

      updateValue(value) {
        this.setState({counter: value});
        this.addToCounter(1)
      }

因为setState是异步的check it将它作为第二个参数传递给 setState 以使其在组件获得新状态时运行:

      updateValue(value) {
        this.setState(
          {counter: value},
          ()=>this.addToCounter(1)
        )
      }

• 和最后一个不要用小写字母命名组件。 React 足够聪明 :) 识别要传递 html 标签或 React 组件:这不起作用:<mycomponent>content</mycomponent>但这可以解决问题<Mycomponent>content</MyComponent> . Button 和 button 也是如此；