相关疑难解决方法(0)

我用来声明像这样的无状态组件:

const example: React.SFC<IExample> = ({propsType}) => ();

然而,证监会现已被弃用,也许Dan Abramov的这篇推文解释了原因.

现在SFC被弃用了我们应该使用什么？

官方 ReactJs 文档建议按照点符号创建组件，如React-bootstrap库：

<Card>
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
  </Card.Body>
</Card>

借助类组件很容易创建此结构：

const CardBody = ({ children }) => <div className='body'>{children}</div>;

class Card extends Component {
  static Body = CardBody;

  render() {
    return (
      <div className='card'>{this.props.children}</div>
    );
  }
}

但也建议尽可能多地使用功能组件。不幸的是，我不知道如何仅使用功能组件来实现这一点。

如果我按照这种方式，我就不能再Card用作组件了，因为他现在是组件的对象：

const Card = {
  Component: CardComponent,
  Body: CardBody
}

export …

我是React的新手,我想清楚地知道要使用哪一个,当涉及到组件我会看到有两种类型.

功能组件:

import React from 'react'

const userInput = (props) => {
    return(
        <div>
            <input type='text' onChange={props.nameChanged} value={props.username}></input>
        </div>
    )
};

export default userInput;

基于类的组件:

import React, { Component } from 'react';
import './App.css';
import UserOutput from './UserOutput/UserOutput';
import UserInput from './UserInput/UserInput';

class App extends Component {

  render() {
    return (
      <div className="App">
        <h3>Assignment Output :</h3>
        <ul>
          <li>
            <UserOutput 
            username={this.state.Usernames[0].username}>
            Welcome to React!
            </UserOutput>
            <UserInput 
            nameChanged={this.nameChangedHandler}>
            </UserInput>
          </li>
                      </ul>
      </div>
    );
  }
}

export default App;

我开始读到我们应该总是尝试使用Functional组件, …

我正在学习 ReactJS，并且了解到有 UI 组件和容器组件。容器组件是使用classes扩展React.Component和包含state以及很好的旧render方法实现的，而 UI 组件是使用创建的functions，它们只关心 UI，因为它们只从props.

示例无状态功能组件：

const Ninjas = (props) => {
    const { ninjas } = props;

    const ninjalist = ninjas.map((x) => {
        var divStyle = {
            color: getRandomColor(),
        };

        return (
            <div className="ninja" key={x.key} style={divStyle}>
                <p>Name: {x.name}</p>
                <p>Age: {x.age}</p>
                <p>Belt: {x.belt}</p>
            </div>
        );
    });
    return <div className="ninja-list">{ninjalist}</div>;
};

export default Ninjas;

与容器组件相同的示例

export default class Ninjas extends Component {
    getRandomColor = () => { …

是否放弃了类组件？

我看到在几个库示例中，函数组件是优先考虑的。

尤其是 React 导航。

同样，带有 Hook 的 React 本身仅使它们可用于函数组件。

主要问题是：为什么功能组件如此重要？

const App = () => (
  <View>
    <Text>Test</Text>
  </View>
  )

class App extends Component {
  render() {
    return (
      <View>
        <Text>Test</Text>
      </View>
    );
  }
}

当我测试时，有两件事是相同的。请告诉我这两者之间的区别。

在通过网络和 SO（这里）阅读了大量文档后，大多数人建议尽可能使用无状态函数（功能组件）。

甚至 Class 组件的大多数生命周期方法都被useState和 和之类的钩子取代了useEffect。

我已经使用钩子和它们的类等价物创建了一些项目，我看到了代码行和功能数量的差异。

那么，哪一个比另一个更好？类组件的功能组件 ?