React建立元件的兩種方法

一function建立元件

1 元件以函式形式建立

2 function hello()
6 reactdom.render(7 ppps
8 元件傳值
1 元件中傳遞資料（元件中傳遞的引數props都是唯讀的，不能重新負值。vue也是）
2 props 形參可以改，不過寫props更有語義
3 function hello(props)
5 }6 const kakaxi
將元件抽離出去
1 父元件
2 import hello from './component/hello.jsx'
//在webpack.config
3 reactdom.render(
4 5 123
6 
7 
8 )9 10 
11 12 
13 14 hello.jsx 元件
15 import react from 'react'
16 //(1)建立即匯出
17 export default function hello(props)
21 22 //（2）先寫函式再暴露
23 //export default hello
24 25

resolve:

和mode，plugins，平級

可以使字尾名.jsx省略不寫。

在專案zh

在專案中用@簡寫src下的根目錄

只需在webpack.config.js下的resolve下新增alias(表示別名)

1  const path=require('path')

2 resolve:
7 }

class 元件名稱 extends react.component

}reactdom.render(
《元件名稱》//
class 建立元件
import react from 'react'import reactdom from 'react-dom'import hello from '@/components/hello'import '@/components/jic'const kakaxi=
class movie extends react.component
}const mydiv=123
//元件傳值props
import react from 'react'import reactdom from 'react-dom'import hello from '@/components/hello'import '@/components/jic'const kakaxi=
class movie extends react.component---}}
const mydiv=123
建立私有元件
import react from 'react'import reactdom from 'react-dom'import hello from '@/components/hello'import '@/components/jic'const kakaxi=
class movie extends react.component
} render()---
----}}
const mydiv=123

React 元件的兩種建立方式

1 使用函式建立元件 函式元件 使用js的函式 或箭頭函式 建立的元件 約定1 函式名稱必須以大寫字母開頭 約定2 函式元件必須有返回值，表示該元件的結構 如果返回值為null，表示不渲染任何內容 const component 哈羅啊 div 或者function component reactd...

React建立元件的兩種方式

function hello props class animal,作用是例項化物件時先執行建構函式的 this.name name this代表的是例項物件 this.age age say ji1 888 例項屬性 static 男 靜態屬性 static class cat extends a...

React元件的兩種建立方式

建立元素 const div react.createelement div 建立元件 const div react.createelement div 元件可以理解成，乙個建立元素集合的模板，當前我可能不需要它生成什麼東西，但我呼叫時，它能幫我生成我要的東西。在react中，元件的建立方式有兩種...