React-3.2 函数式组件、todoList（hooks版本）实战

5. 函数式组件

函数式组件中，没有 state 和 生命周期，所以又被称为 无状态组件，在早期 react 版本中，被当作纯渲染组件来用

函数组件：
1).组件的第1个参数是 props - 接收父级传递过来的信息
2).组件中的 return（必写）定义该组件要渲染的内容
3).没有生命周期，没有this，没有state
在16.7(beta)之前，函数组件 一直当做纯渲染组件来使用

app.js：

import React from 'react';

function Child(props){
   
  return <h1>{
   props.info}</h1>
}

function App(){
   
  // console.log(this); //undefined

  // 1.很简单的用法  记得return
  // return <div>啊~哈哈哈</div>

  // 2. 子组件
  return <Child info="哈哈" />
}

export default App;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  // <React.StrictMode>
    <App />,
  //</React.StrictMode>,
  document.getElementById('root')
);

6. React hooks

React hooks 是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能
参考：https://reactjs.org/docs/hooks-intro.html

6.1 React Hooks 优势

• 简化组件逻辑
• 复用状态逻辑
• 无需使用类组件编写

6.2 Hook 使用规则

1. 只在最顶层使用 Hook，不要在循环，条件或嵌套函数中调用 Hook
2. 只在 React 函数中调用 Hook，不要在普通的 JavaScript 函数中调用 Hook
   可以在：
   1). React 函数组件中
   2). React Hook 中 - 自定义 hook 时，可以调用别的hook
3. 所有的 hook 必须 以 use 为开头命名

6.3 常用 hook

• useState
  const [state, setState] = useState(initialState);
• useEffect
  对应类组件中的三个生命周期函数：
  componentDidMount（挂载完成）、componentDidUpdate（更新完成） 和 componentWillUnmount（将要卸载）
  需要清除的副作用
• useRef

6.3.1 useState

常用 hook 之一 ： useState
const [state, setState] = useState(initialState);
let [状态的值，修改状态的方法(见名知意，自定义方法名)] = userState(状态的初始值)
注意 中括号 []

类和函数中的小区别：
1）类里是比较，是类比的更新
2）在函数这里，是覆盖的更新 修改状态的方法（例如setData）是直接覆盖原本所有的值了

app.js：

import React,{
   useState} from 'react';
import Child from './Child'

function App(){
   
  console.log(this);
  // 1.---初始值是具体值，字符串
  // let [name,setName] = useState("浩克");
  // return <div>
  //           <Child info={name}/>

  //           <button onClick={()=>{
   
  //             setName("疯狂浩克");
  //           }}>
  //             变身
  //           </button>
  //         </div>

  // 2.---初始值是对象
  let [data,setData] = useState({
   
    name:"浩克",
    age:28
  });

  return <div>
            <Child data={
   data} />

            <button onClick={
   ()=>{
   

              // setData("疯狂浩克");//改成字符串，会覆盖整个data，age也会覆盖掉
              
              setData({
     //改成对象
                name:"疯狂浩克",
                age:data.age
              });
            }}>变身
            </button>

          </div>
}


export default App;

Child.js：

import React from 'react';

// 1.---初始值是具体值，字符串
// function Child(props){
   
//   return <h1>{props.info}</h1>
// }

// 2.---初始值是对象
function Child(props){
   
    // console.log(props);
    let {
   data} = props;
    
    return <div>
              {
   /* 解构与否都可找到，解构更省事些 */}
              <h1>name:{
   data.name}</h1>
              <h1>age:{
   data.age}</h1>
          </div>
}

export default Child;

原始：

点击 “变身”：

6.3.2 useEffect

常用 hook 之二 ： useEffect
对应类组件中的三个生命周期函数
componentDidMount（挂载完成）、componentDidUpdate（更新完成） 和 componentWillUnmount（将要卸载）
需要清除的副作用

let [状态的值，修改状态的方法] = userState(状态的初始值)

app.js：

import React,{
   useState} from 'react';
import Child from './Child'
function App(){
   

  let [data,setData] = useState({
   
    name:"浩克",
    age:28
  });

  let [show,setShow] = useState(true)
  return <div>
            {
   show?<Child data={
   data} />:""}

            <button onClick={
   ()=>{
   
              setData({
   
                name:"疯狂浩克",
                age:data.age
              });
            }}>变身
            &