Реактивные компоненты лучшие практики

Автор оригинала: Faizan Haider.

При разработке приложения, используя определенную библиотеку/рамки, вам нужно знать о том, что это лучшие практики и стиль для создания чистого и краткого кода.

Они основаны на моем опыте, работающем в команде.

Один компонент на файл

В реакцию простейший способ определить компонент – написать функцию JavaScript.

//This is called functional component because it's literally a function
function Welcome(props) {
  return Hello, {props.name};
}

Другой способ – расширить класс компонентов от Ract.component который предоставляет нам метод жизненного цикла реагирования.

class Welcome extends React.Component {
  render() {
    return Hello, {this.props.name};
  }
}

Должен быть только один компонент на файл. Мы также должны избегать Rect.Createelement Если не использует файл, который не Jsx Отказ Я бы предложил всегда использовать Jsx Отказ

Нестандартные против государства

Всегда используйте функцию без природы, если вам не нужно использовать методы жизненного цикла RACT, Ref или State.

//Stateless component. No need for state, refs or life cycle method
function Welcome(props) {
  return Hello, {props.name};
}
//Statefull component.
class Welcome extends React.Component {
  constructor(props) {
    	super(props);
        this.state = {'Tehmina'};
    }
    componentDidMount() {
      this.timer = setTimeout(
        () => this.tick(),
        1000
      );
    }
    
    componentWillUnMount() {
    	clearTimeout(this.timer); //We should always destroy these kind of handlers
    }
    
    tick() {
    	this.setState({name: 'Faizan'});
    }
    render() {
      return Hello, {this.state.name};
    }
}

Воспроизводитель

Используйте Ref Callback. Это гораздо более декларативно

//Bad

//Recommended
 { this.myRef = ref; }} 
/>

Jsx теги в методе рендера

При возврате из метода Render и возврата тегов JSX, если они находятся более одной линии, обертывают их в скобках. Вы также можете назначить детские теги, а затем использовать только одну строку.

//Bad
render() {
  return 
    		
           ;
}
//Recommended
render() {
  return (
    	
    		
        
    );
}
//Or this one also good
render() {
  const child = ;
  return {child};
}

Обработчик события

Всегда свяжите обработчик событий, используемый в рендере внутри конструктора или используйте функцию стрелки, потому что она автоматически связывается с этим контекстом вне функции, которая используется.

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.onClickDiv = this.onClickDiv.bind(this);
  }

  onClickDiv(event) {
  }

  render() {
    return (
    	 //recommended
         this.onClickDiv(e) } /> // Not a good practice because when re-render componnent it would create new closure every time
       );
  }
}

DiflifeProps против пропиты

Всегда используйте реквизиты по умолчанию для небежного поля реквизита. Он гарантирует, что ваш компонент делает то, что вы ожидаете, и устраняет определенные проверки типа и информируют других разработчиков об их использовании. Пропорты позволяют разработчику знать, какие реквизиты используются для текущего компонента.

function Welcome({name, height, children}) {
  return {name}{height}{children};
}
Welcome.propTypes = {
  name: PropTypes.string.isRequired,
    height: PropTypes.number,
    children: PropTypes.node
}
Welcome.defaultProps = {
  height: 0,
    children: null //Null is of type object in javascript with no value
}

Компоненты более высокого порядка (HOC) VS Mixins

Компонент более высокого порядка в реакции представляет собой шаблон для повторного использования логики компонента. HOC – это функция, которая принимает компонент в качестве аргумента и возвращает новый компонент для повторного использования. В реакцию использование микс обескуражено, это связано с тем, что они вводят нанесение имени, неявные зависимости и труднее отслеживать, когда-то разработаны и использованы, потому что микс может использовать другую смеси. Например, использование смешивания при использовании контекста в реакции.

var RouterMixin = {
  contextTypes: {
    router: React.PropTypes.object.isRequired
  },

  // The mixin provides a method so that components
  // don't have to use the context API directly.
  push: function(path) {
    this.context.router.push(path)
  }
};

var Link = React.createClass({
  mixins: [RouterMixin],

  handleClick: function(e) {
    e.stopPropagation();

    // This method is defined in RouterMixin.
    this.push(this.props.to);
  },

  render: function() {
    return (
      
        {this.props.children}
      
    );
  }
});

module.exports = Link;

Потому что использование контекста разбито в реакции, виновника – это должен быть необходим Отказ Вы хотите скрыть свою реализацию и сохранить его в мистине. Решение – это использование HOC. Для других альтернативных растворов смешин являются состав компонентов и полезных модулей.

function withRouter(WrappedComponent) {
  return React.createClass({
    contextTypes: {
      router: React.PropTypes.object.isRequired
    },

    render: function() {
      // The wrapper component reads something from the context
      // and passes it down as a prop to the wrapped component.
      var router = this.context.router;
      return ;
    }
  });
};

var Link = React.createClass({
  handleClick: function(e) {
    e.stopPropagation();

    // The wrapped component uses props instead of context.
    this.props.router.push(this.props.to);
  },

  render: function() {
    return (
      
        {this.props.children}
      
    );
  }
});

// Don't forget to wrap the component!
module.exports = withRouter(Link);

Списки и ключи

Когда мы добавляем ключ к элементу внутри массива, он улучшает производительность нашего рендеринга. Клавиша говорит реагировать, какой элемент изменен, добавлен или удален. Ключ всегда должен быть уникальным, а не индексом массива.

const listItems = numbers.map((number) =>
  
    {number}
  
);

Зависит от повышения производительности

Этот метод жизненного цикла выполняется до переработки процесса. Когда реквизиты компонента или изменение состояния реагируют, реагируют сравнивают новые значения с отображением. Когда они не равны, Rect обновит DOM.

По умолчанию он возвращает TRUE, оставив реагирование на выполнение обновления. Вы можете использовать SOCCOMPONENTUPDATE (NextProops, NextState) И верните False, сравнивая NextProops, чтобы представить (предыдущее) значение для остановки всей рендеринга дочерних ветвей в компоненте. Это может значительно улучшить производительность, когда вам не нужно переназначить компонент.

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) { //By using immutable library we can avoid deep comparison of objects as well
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      
    );
  }
}

Мы также можем использовать Rect.Purecomponent Для этого, но помните, что это использует только мелкое сравнение.

Я надеюсь, что вы нашли эту статью полезную. Я был бы прикасаться к redux дальше.

Один компонент на файл

Hello, {props.name}

Hello, {this.props.name}