useState是0.16.7版本中内置的react钩子之一。

useState应该只在功能组件中使用。如果我们需要一个内部状态，并且不需要实现更复杂的逻辑(如生命周期方法)，则使用useState。

const [state, setState] = useState(initialState);

返回一个有状态值和一个更新它的函数。 在初始呈现期间，返回的状态(state)与 作为第一个参数传递的值(initialState)。 setState函数用于更新状态。它接受一个新的 状态值，并将组件的重新呈现纳入队列。

请注意用于更新状态的useState钩子回调与this.setState组件的行为不同。为了说明两者的区别，我准备了两个例子。

class UserInfoClass extends React.Component { state = { firstName: 'John', lastName: 'Doe' }; render() { return <div> <p>userInfo: {JSON.stringify(this.state)}</p> <button onClick={() => this.setState({ firstName: 'Jason' })}>Update name to Jason</button> </div>; } } // Please note that new object is created when setUserInfo callback is used function UserInfoFunction() { const [userInfo, setUserInfo] = React.useState({ firstName: 'John', lastName: 'Doe', }); return ( <div> <p>userInfo: {JSON.stringify(userInfo)}</p> <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button> </div> ); } ReactDOM.render( <div> <UserInfoClass /> <UserInfoFunction /> </div> , document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

使用setUserInfo回调时创建新对象。注意我们丢失了lastName键值。修正了我们可以在useState内部传递函数。

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

看到的例子:

// Please note that new object is created when setUserInfo callback is used function UserInfoFunction() { const [userInfo, setUserInfo] = React.useState({ firstName: 'John', lastName: 'Doe', }); return ( <div> <p>userInfo: {JSON.stringify(userInfo)}</p> <button onClick={() => setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' }))}> Update name to Jason </button> </div> ); } ReactDOM.render( <UserInfoFunction /> , document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

与类组件中的setState方法不同，useState可以 不自动合并更新对象。你可以复制这个 通过结合函数更新程序表单和对象扩展来实现 语法: setState(prevState => { / /对象。Assign也可以 返回{…prevState…updatedValues}; })；

有关我们的更多信息，请参阅官方文档。

谢谢loelsonk，我做到了

const [dataAction, setDataAction] = useState({name: '', description: ''}); const _handleChangeName = (data) => { if(data.name) setDataAction( prevState => ({ ...prevState, name : data.name })); if(data.description) setDataAction( prevState => ({ ...prevState, description : data.description })); }; ....return ( <input onChange={(event) => _handleChangeName({name: event.target.value})}/> <input onChange={(event) => _handleChangeName({description: event.target.value})}/> )

钩子是React v16.7.0 alpha中的一个新特性，useState是“钩子”。useState()设置任意变量的默认值，并在函数组件(PureComponent函数)中进行管理。ex: const [count, setCount] = useState(0);设置默认值count 0。你可以使用setCount来增加或减少这个值。onClick={() => setCount(count + 1)}增加计数值

useState是0.16.7版本中内置的react钩子之一。

useState应该只在功能组件中使用。如果我们需要一个内部状态，并且不需要实现更复杂的逻辑(如生命周期方法)，则使用useState。

const [state, setState] = useState(initialState);

返回一个有状态值和一个更新它的函数。 在初始呈现期间，返回的状态(state)与 作为第一个参数传递的值(initialState)。 setState函数用于更新状态。它接受一个新的 状态值，并将组件的重新呈现纳入队列。

请注意用于更新状态的useState钩子回调与this.setState组件的行为不同。为了说明两者的区别，我准备了两个例子。

class UserInfoClass extends React.Component { state = { firstName: 'John', lastName: 'Doe' }; render() { return <div> <p>userInfo: {JSON.stringify(this.state)}</p> <button onClick={() => this.setState({ firstName: 'Jason' })}>Update name to Jason</button> </div>; } } // Please note that new object is created when setUserInfo callback is used function UserInfoFunction() { const [userInfo, setUserInfo] = React.useState({ firstName: 'John', lastName: 'Doe', }); return ( <div> <p>userInfo: {JSON.stringify(userInfo)}</p> <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button> </div> ); } ReactDOM.render( <div> <UserInfoClass /> <UserInfoFunction /> </div> , document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

使用setUserInfo回调时创建新对象。注意我们丢失了lastName键值。修正了我们可以在useState内部传递函数。

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

看到的例子:

// Please note that new object is created when setUserInfo callback is used function UserInfoFunction() { const [userInfo, setUserInfo] = React.useState({ firstName: 'John', lastName: 'Doe', }); return ( <div> <p>userInfo: {JSON.stringify(userInfo)}</p> <button onClick={() => setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' }))}> Update name to Jason </button> </div> ); } ReactDOM.render( <UserInfoFunction /> , document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

与类组件中的setState方法不同，useState可以 不自动合并更新对象。你可以复制这个 通过结合函数更新程序表单和对象扩展来实现 语法: setState(prevState => { / /对象。Assign也可以 返回{…prevState…updatedValues}; })；

有关我们的更多信息，请参阅官方文档。

useState钩子的语法很简单。

const [value, setValue] = useState(defaultValue)

如果您不熟悉这个语法，请到这里。

我建议您阅读文档。有很好的解释和大量的例子。

import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // its up to you how you do it const buttonClickHandler = e => { // increment // setCount(count + 1) // decrement // setCount(count -1) // anything // setCount(0) } return ( <div> <p>You clicked {count} times</p> <button onClick={buttonClickHandler}> Click me </button> </div> ); }

useState是一个钩子，它允许你在函数组件中使用状态变量。

React中有两种类型的组件:类组件和功能组件。

类组件是扩展自React的ES6类。组件，可以有状态和生命周期方法:

class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
  message: ‘’    
 };
}

componentDidMount() {
/* ... */
 }

render() {
return <div>{this.state.message}</div>;
  }
}

函数式组件是只接受参数作为组件属性并返回有效JSX的函数:

function Message(props) {
  return <div>{props.message}</div>
 }
// Or as an arrow function
const Message = (props) =>  <div>{props.message}</div>

如您所见，没有状态或生命周期方法。