Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤 Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载  Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

React 中什么是有状态的组件?

2019-02-28

回答

有状态的组件是一种其行为取决于该状态的组件。这意味着在一个组件的两个实例中,即使给这两个实例赋予相同的属性,他们也不一定会有相同的渲染输出,这和纯函数组件不同。

// Stateful class component
class App extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }
  render() {
    // ...
  }
}

// Stateful function component
function App() {
  const [count, setCount] = useState(0)
  return // ...
} 

加分回答

  • 有状态的组件包含了他们内部所依赖的状态。
  • 有状态的组件是类组件或者是使用了 useState hook 的函数组件。
  • 有状态的组件在构造器中或使用 useState() 对他们的状态进行初始化,如下所示:
import {useState} from 'react';

function Counter(){

 let [number,setCount ] = useState(0);

   return (
       <div>
        <h1>{number}</h1>
        <button onClick={()=>setCount(number+1)} >Increment</button>
        <button onClick={()=>setCount(number-1)} >Deccrement</button>
       </div>
   )
}

返回总目录

30 秒面试系列一


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步