React查缺補漏

2021-10-02 21:17:29 字數 3454 閱讀 4243

1.react.createelement:根據指定的第乙個引數建立乙個react元素

第乙個引數是必填,傳入的是似html標籤名稱,eg: ul, li

第二個引數是選填,表示的是屬性,eg: classname

第三個引數是選填, 子節點,eg: 要顯示的文字內容

render()

}react.createelement可以寫成如下:

render(),

react.createelement(

'p',

,'hello react'))

)}}

2.第三方包classnames

作用:可以根據物件的方式來確定樣式名

前提:npm install classnames

import classnames from 'classnames';

render() = this.props

return (

根據傳參確定樣式)}

}

3.react自帶fragment元件

作用:因為react語法在渲染return方法中必須有乙個根標籤,而有的時候根標籤毫無作用,這個時候我們就可以使用fragment元件,fragment不會產生在dom中產生新的標籤

import react,  from 'react'

render() from 'react'

const child = memo(() => , (pre, next) => )

2)usememo

const child = memo((props) => )

const parent = () =>

},[count]

)return (

}>+1

}>+1

)}3)usecallback

const child = memo((props) => )

const parent = () => ,

)return (

)}

19.自定義hooks

customhooks.js

import from 'react'

export const usewindowsizehook = () => , )

useeffect(() =>

window.addeventlistener('resize', handleresize, false)

return () => window.removeeventlistener('resize', handleresize, false)

}, )

return [width, height]

}import from './customhooks'

const parent = () =>

高度: )

}

20.usereducer、usecontext

import react,  from 'react'

const ctx = createcontext(null)

const reducer = (state, action) =>

}const child = () =>

) } }

>-1

) } }

>+1

)}const parent = () =>

)} // 第乙個引數引數傳入reducer,第二個引數傳入初始值

const [ count, dispatch ] = usereducer(reducer, 20)

return (

)}

21.useselector、usedispatch代替connect

目錄結構:

component

action.js (1)

form.js (2)

reducer.js (3)

store

configurestore.js (4)

reducer.js (5)

index.js (7)

(1)export const type =

export const updatetel = (tel) => (

})export const updatename = (name) => (

})(2)

import react from 'react'

import from 'react-redux'

import from './action'

export default () => )

console.log('formdata', formdata)

return (

)}(3)

import from './action'

const initstate =

export default (state, action) => = action

if(object.values(type).includes(type)) return

return state || initstate

}(4)

import from 'redux-devtools-extension'

import thunk from 'redux-thunk'

import reducer from './reducer'

export default () =>

(5)import from 'redux'

import formreducer from '../components/reducer'

export default combinereducers()

(6)import react from 'react'

import form from './components/form'

return (

)}(7)

import react from 'react'

import reactdom from 'react-dom'

import from 'react-redux'

import configurestore from './store/configurestore'

const store = configurestore()

reactdom.render(

document.getelementbyid('root')

)

bootstrap 查缺補漏

bootstrap標題樣式進行了以下顯著的優化重置 單行內聯 多行塊 注pre.pre scrollable 控制 塊區域最大高度為340px,一旦超出這個高度,就會在y軸出現滾動條 使用者輸入 複製 table 基礎 table striped 斑馬線 table bordered 帶邊框的 ta...

HTML查缺補漏

標籤名必須使用小寫字母 屬性名必須使用小寫字母,屬性值必須用雙引號包裹 使用4個空格作為乙個縮排層級 class屬性值 單純全小寫,單詞之間以 分割 id屬性值使用小駝峰式命名法 元素是實體,標籤是名稱 標記 元素構成html檔案的基本物件 標籤用於標記html元素屬性 引入外部資源 定義內聯樣式 ...

八,查缺補漏

宣告 public 初始化sdk static napi value inithiksdk const napi callbackinfo info 登出sdk static void cleanuphiksdk const napi callbackinfo info 實現 初始化sdk else...