Const = () => vs Функции функций класса name () {} в React Native - PullRequest
Новая
       22

Const = () => vs Функции функций класса name () {} в React Native

0 голосов
/ 21 февраля 2020

Я новичок в реагировании на нативную, я немного связан с путаницей компонентов.

Когда я создаю первое реагирующее нативное приложение, я увидел App.js компонентов в приложении. js, созданных согласно следующему code: 

export default function App() {
 ...
}

, и, как я видел учебники, многие люди, почти все люди, делающие компоненты, следуют следующему коду: 

const FirstComponents = () => {
  ...
}

Я также не совсем понимаю, что такое компоненты функций и базовые компоненты классов. создан согласно следующему коду: 

export default class FirstComponents extends Components(){
 ...
}

В чем разница между функциональными и базовыми компонентами класса?

Пожалуйста, дайте мне ответ с примером в реальном времени будет хорошо, ваше время будет оценено

Ответы [ 2 ]

1 голос
/ 21 февраля 2020

В javascript существует несколько способов создания функции. Например: 

function myFunction () {
//some action
}
const myFunction = () => {
//some action
}

Эти две функции являются одним и тем же.

Теперь вторая часть вашего вопроса - «В чем разница между функциональными компонентами и компонентами на основе классов?»

Компоненты на основе классов, используемые для управления state и для методов жизненного цикла (ComponentDidMount и др. c ...) в прошлом. И если вы не используете state в своих компонентах или методах жизненного цикла, вы должны использовать функциональный компонент. В основном, если у вас есть небольшой компонент с некоторыми элементами пользовательского интерфейса, лучше было бы использовать функциональные компоненты. Однако с React версии 16.8 команда React внедрила hooks.

Hooks предоставляет те же понятия, что и методы состояния и компонента жизненного цикла компонентов, и многое другое. С помощью хуков вы можете управлять своим компонентом, даже если он является функциональным компонентом.

0 голосов
/ 21 февраля 2020

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

  1. Крючки могут использоваться только в функциональном компоненте, класс не может.
  2. Конструктор используется для инициализации this в компонент класса, но в функционале вам не требуется this.
  3. Хуки жизненного цикла недоступны в функциональном компоненте, они являются частью компонента класса.
  4. Вы можете использовать useEffect хук для ловушки жизненного цикла, например componentDidMount ,

Для краткого примера: 

function App(){

    const [count, setCount] = useState('');

}

В приведенном выше примере "count" - это свойство локального состояния компонента, а setCount - метод, который обновляет состояние. 

class App extends React.Component{
   constructor(props){
      super(props);
      this.state = { count: 0 };
      this.increaseCount = this.increaseCount.bind(this);
   }

   increaseCount(){
      this.setState({count: this.count+1});
   }
   // lifecycle methods like componentDidMount, componentDidUpdate etc.
   render(){
      return(
        <button onClick={this.increaseCounter}>INCR</button>
      );
   }

}

В этом компоненте класса вы можете видеть, что состояние определяется в конструкторе и обновляется с помощью метода setState.

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

...