React从零学习 概要 - 1

React 概要 - 1

react的两种组件

函数组件

即通过function 创建的组件 functionname 大驼峰法命名
函数名称 即 组件名称
react16.8之前，函数组件为无状态组件，只负责渲染，无生命周期的概念，不进行数据处理
react16.8之后，提供了hook 让函数组件有了状态处理的能力，开始全面替代类组件

function Header(){
	return <div>this is header</div>
}
// 通过 <Header /> 调用

类组件

即通过class 创建的组件 classname 大驼峰法命名
类名 即 组件名 继承自React.Component

class Header extends React.Component{
	render(){
		return(
			<div>this is header</div>
		)
	}
}
// 通过 <Hearder /> 调用

React Hook

参考链接 ： https://react.docschina.org/docs/hooks-intro.html
请一定要去看参考链接 讲的很清楚。

react Hook 让react函数组件使用 state 以及其他的 React 特性。
目的：组件间复用状态逻辑 拆分组件内部函数以便于理解 替代class

Hook需要遵循的规则(和报错相关)：

• 不要在循环，条件或嵌套函数中调用 Hook
• 只在React函数中调用hook 在React函数组件中 或自定义Hook中调用其他Hook

import React, { useState, useEffect} from 'react';

function Example1() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0); // 返回一对值：当前状态，更新该值的函数
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]) // 一个函数中可以使用多个useState
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
//
// effect hook 提供了执行side effect的能力 
// 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。
// 默认情况下 它在第一次渲染之后和每次更新之后都会执行
// 数据获取、设置订阅以及手动更改 React 组件中的 DOM 都是 side effects 的例子
function Example2() {
  const [count, setCount] = useState(0);

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
    return function cleanUp(){ // 清除函数 React 会在组件卸载的时候执行清除操作
    	...
    }
  },[count]); // 仅在count更改时更新

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React通过Hook调用的顺序来确定哪个 state 对应哪个 useState，因此如果将某个Hook放在条件语句中执行，就会改变调用顺序，因此条件判断应该在Hook内部。

// 错误示例
if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
}
// 正确示例
useEffect(function persistForm() {
    // 👍 将条件判断放置在 effect 中
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
});

Hook的复用：自定义Hook 同样需要遵循Hook的规则。
参看 ：https://react.docschina.org/docs/hooks-custom.html