react開發簡單記錄

2021-10-03 14:11:09 字數 2057 閱讀 4376

// 定義函式元件

export default function (props)

)}// 定義類元件

export default class title extends react.component )}}

// 匯入元件

import title from './title';

// 使用該元件(在另乙個元件中)

export default function ()

import react from 'react';

export default class title extends react.component

} // 元件掛載到dom上時自動執行

componentdidmount() , () => )

}, 1000);

} // 元件從dom樹上解除安裝時執行

componentwillunmount()

render()

)}}

import react,  from 'react';

export default function ()

function handlechange(status)

return (

<>

}>

)}

import react from 'react';

export default function ()

)}// 使用

hello

import react from 'react';

export default class title extends react.component

}title.defaultprops =

title.proptypes =

預設的表單輸入元素都是非受控元件,自己來維護狀態,可以將狀態指向元件狀態通過元件來控制

import react,  from 'react';

export default function ()

return (

)}

// 父元件

import react from 'react';

import react, from 'react';

import title from './title'

export default () =>

)}// 子元件

import react from 'react';

export default function (props)

return (

)}

import react,  from 'react';

import title from './title'

export default () => }>click

)}

使用react.lazy(() => import('./component'))匯入頁面元件,配合react-router-dom做路由,在等待載入元件時做降級處理,再定義乙個異常捕獲邊界(error boundaries)用來捕獲模組載入失敗問題(如網路問題,伺服器關閉),不支援服務端渲染

import react from 'react';

export default class title extends react.component

render() >

)}}

return (

<>

hello,

world

)import react, from 'react';

export default function (props)

React 開發記錄

學習使用 react 要注意點地方有哪些呢?jsx class 是關鍵字要用classname替代,for也是關鍵字要用 htmlfor 代替 jsx 表示式返回null就是什麼都不顯示,可以做隱藏某些元素 自定義的元件必須是大寫字母開頭,普通的html都是小寫開頭 jsx事件名需使用小駝峰法 on...

react 搭建react開發環境

搭建react開發環境有兩種 1 必須要安裝nodejs 注意 安裝nodejs穩定版本 2.安裝腳手架工具 單檔案元件專案生成工具 只需要安裝一次 3.建立專案 可能建立多次 找到專案要建立的目錄 4.cd 到專案裡面 cd reactdemo npm start yarn start執行專案 n...

react簡單元件

如下 constructor props this.state 獲取原先的陣列 可以直接寫this.state.todos 效果一樣 todos.unshift todo 新增陣列 this.setstate 更新陣列值 render class add extends react.componen...