Day19-Component

学习React过程中很重要的概念为组件化。

何谓组件化???

重复使用
切割成更细小的碎片，达到耦合性降低
组合各个组件形成一个页面

下面我们来把React的官方网站依照组件的概念切割

把导航栏跟下面内文先分割成两个组件
导航栏再细分成Logo、Links、Search、和右边的版本Link

我们思考一下，如果有四个页面，只有两个需要用到导航栏，是不是就只要在其中两个页面引入导航栏的组件呢!!!

Class component

在React hooks出现以前，学习类组件必须先把this与物件导向基本先学会，而类组件要使用继承又使人觉得笨重、烦躁!!!

import React from 'react'

class App extends React.Component {
  render() {
    const name = 'Ian'
    
    return (
      <div className="app">
        <h1>hello</h1>
        <p>{name}</p>
      </div>
    )
  }
}
export default App;

Function component

Hooks出现之後，解救苍生，也可以让我们更好的使用组件中的状态。

接下来我们也会使用函式组件，熟悉一个之後，再学类组件就很容易学会。

import React from 'react'

function App() {
  return(
    <h1>Hello</h1>
  )
}
export default App;

Hooks

useState
useEffect
useContext
useReducer
useRef
useLayoutEffect
useCallBack
useMemo

JSX

我们上面使用函式组件和类组件中很奇异的写法就是JSX。

JSX让我们能够把逻辑和UI结合在一起，让资料自己决定画面。

但React并不要求我们一定要使用JSX，看你个人选择

React injection

透过{ } 在React中取用变数

function App() {
  const name = 'Ian'
  return (
    <div className="App">
      <h1>{name}</h1>
    </div>
  );
}
export default App;

党然也可以在{ }中使用JavaScript

function App() {
  const name = ['Ian','Dennis']
  return (
    <div className="App">
      {name.filter((item) => item === 'Dennis')}
    </div>
  );
}
export default App;

表达式

function App() {
  const name = 'Ian'
  const element = <h1>{name}</h1>
  return (
    <div className="App">
      {element}
    </div>
  );
}

export default App;

当然你也可以塞入更多的element

function App() {
  const element = (
    <div>
      <ul>
        <li>Ian</li>
        <li>Dennis</li>
      </ul>
    </div>
  )
  return (
    <div className="App">
      {element}
    </div>
  );
}
export default App;

明天我们会进入State和Props的章节，敬请期待!!!