React学习笔记3-State Hook

State Hook

吾生也有涯，而知也无涯。——庄子

接着学习一下React的State Hook。

通过State hook，可以直接通过function来构建有状态的组件，只要引入useState方法即可。

写了一个小例子，包含一个输入和列表，分别通过两个function实现。
输入的数据通过一个列表展示：

import React, { useState } from 'react';


function Input({ addName }) {
  const [name, setName] = useState("hello");

  return (
    

      name
       { setName(e.target.value) }} />
       { addName(name); }}>click me!
    
  );
}

function List({ nameList }) {
  return (

    

      {nameList.map(n => 
{n}
)}
    
  );
}

function NameTool() {


  const [list, setList] = useState([]);

  const add = name => {

    const newList = [...list];
    newList.push(name);
    setList(newList);


  };

  return (

    
    
  
);
}

function App() {
  return ;
}

React的useState用到了destructing解析赋值的语法。声明了一个state和修改state的方法。

另外需要注意的是，通过定义个方法然后传给子组件来更新状态，是非常常见的用法。

参考阅读

• https://reactjs.org/docs/hooks-state.html