Question

我正在使用ReactJS重建我的投资组合，因为我正在学习这种新语言，并且我有1个问题。我应该只在不需要更新任何内容的网站上使用状态或道具吗？

这是我的主要课程：

class App extends Component {

  state = {
    name: 'My name',
    job: 'Desenvolvedor Web'
  }

  render() {
    return (
      <div className="App">
        <Header name={this.state.name} job={this.state.job}/>
      </div>
    );
  }
}

这是我的Header.js

const Header = (props) => {
    return(
        <div className="Header">
            <div className="conteudo text-center">
                <img src="" className="rounded img-circle"/>
                <h1>{props.name}</h1>
                <h2>{props.job}</h2>
        </div>
)
}

我想我的整个一页投资组合都将遵循这种结构路径，而不会在我的DOM中大量使用处理和更改。

对于这个菜鸟问题，我感到很抱歉，我真的在尽力学习React。

Answer 1

状态用于更改组件的属性，从而导致组件重新呈现。如果您只是传递数据以进行读取，则props是更合适的选择。

Answer 2

您应同时使用state和props。您可以在代码中同时使用两者。状态是由组件管理的，可以通过道具传递给孩子。一种简单的理解方法是，您可以将props形式的Parent组件的状态（App）传递给子项（Header），这是React中的一个重要概念。

状态是可读写的，而道具是只读的。同样，组件状态的任何更改都会触发重新渲染。

在这里，您的状态充当数据的顶级/根级，如果需要再次使用，则可以向下传递给其他组件。

请参阅这些以获取更多信息。

What is the difference between state and props in React?

https://flaviocopes.com/react-state-vs-props/

我应该在这个简单的ReactJS页面中使用State还是Props？

2 个答案: