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 秒面试系列一