ReactJS基础实作问题(lifecycle, state, props, router, hooks)

简述React生命週期

mount是component首次被渲染到DOM的阶段，在functional component中，我们通常会在component渲染完成后（也就是return语句执行完毕后）使用useEffect来执行后续操作，例如呼叫API获取资料，然后把得到的资料放进state里，等待updateupdate (re-rendering) 则是component在state或props改变后更新DOM的阶段，在更新的时候React只会去做最小程度的渲染unmount是指一个component从DOM中被移除的阶段，相对应的setTimeout或event listener也应该被移除

state和props分别是什么?有何差别?

state是在component内使用的资料，可以被改变，props是父元件提供给子元件使用的资料，是唯独的，不可以被改变，若需要改变他，要从在定义这个prop的元件里，把这个prop以state或callback function传递下去。这样做的好处是可以确保props资料的一致性

state和props的使用时机分别为何?

如果一个资料会经常改变，或者它的值取决于用户的互动，那就要使用state来管理这个数据。如果一个数据不怎么需要改变，那么可以使用props来传递这个资料

React Router 怎么用

先下载package (npm i react-router-dom)

React router 元件可以被分成三种

Routers 例如 <BrowserRouter> 和 <HashRouter>Route matchers 例如<Routes> 和 <Route> componentsNavigation 例如 <Link> and <NavLink> componentsRouters若不需要后端，可用hash router，react会parse # 在用户端在有后端的时候，而且通常在打造SPA上的时候，可用BrowserRouter。在index.js把<React.StrictMode> 取代成BrowserRouter，包住AppRoute matchersRoutes：是用来取代Switch元件，包在Route外层，检查是否有对应的Route。在App.js里，包住客製元件。Route：有两个prop，分别是path和element

<Route path="/" element={<Home/>}></Route>

<Route path="contact" element={<Contact/>}></Route>

Nagivation

Link：类似HTML中的元素，用来navigate至其他页面，包含一个to prop，里头写的是你在Route定义的url，例如我们在一个购物网站，要到结帐页面可以这样写

<div className="checkout-wrap">  <Link to="checkout">checkout</Link></div>

NavLink： 是一种特殊类型的 ，预设情况下，在它处于活动状态时会添加active类别。我们通常在建立导览列(navigation menu)，需要写一连串连结时使用它。

Hooks

Hook的特性

只能在React函式的最顶层使用Hook，也不能在迴圈(如for)、if...else 或巢状结构(如map)中使用普遍用在functional component中，在class component中不管用

useState的用处为何?

用处为宣告state和state setter function ，setter 是用来更新State的值并且触发re-render

怎么使用useEffect？

用处为执行副作用(side effect)语法为 useEffect(()=>{}
,[dependency array])
我自己会把它想成useEffect(副作用,[触发条件])

如何用 useState 来对一个 array 增减内容？

正确範例

新增

const [arr, setArr] = useState(["item1"]);useEffect(() => {  setArr([...arr, "item2"]);}, []);useEffect(() => {      console.log(arr); // ['item1', 'item2']}, [arr]);

删除

  const [myArray, setMyArray] = useState(["a", "b", "c"]);  const removeItem = (index) => {    setMyArray((prevArr) => prevArr.filter((item, i) => i !== index));  };  useEffect(() => {    removeItem(0);  }, []);  useEffect(() => {    console.log(myArray); //["b","c"]  }, [myArray]);

避免直接修改state的内容

  let [arr, setArr] = useState(["item1"]);  arr = ["item2"]

虽然说从技术角度来说这样做是有效的，当你直接重新赋值 arr 时，React 将不会察觉到这个改变，元件也不会基于这个变化重新渲染，所以记得要用state setter去处理。

避免无限渲染(範例1)

 let [arr, setArr] = useState(["item1"]); setArr([...arr, "item2"]);

setArr 函式在被调用时会触发元件的重新渲染，进入了函式调用、元件重新渲染的轮迴。所以应该要设定在条件触发后再用state setter

避免无限渲染(範例2)
这个例子里，我们设定useEffect副作用为更新arr的内容，又将arr放进deps array，所以进入不断更新arr、运行useEffect的轮迴

  const [arr, setArr] = useState(["item1"]);  useEffect(() => {    setArr([...arr, "item2"]);  }, [arr]);

以上若有任何错误或建议，都欢迎留言给我，谢谢