React 老版本的context API使用對比

2021-09-02 21:37:02 字數 1125 閱讀 7529

context 通過元件樹提供了乙個傳遞資料的方法,從而避免了在每乙個層級手動的傳遞 props 屬性。

在乙個典型的 react 應用中,資料是通過 props 屬性由上向下(由父及子)的進行傳遞的,但這對於某些型別的屬性而言是極其繁瑣的(例如:地區偏好,ui主題),這是應用程式中許多元件都所需要的。 context 提供了一種在元件之間共享此類值的方式,而不必通過元件樹的每個層級顯式地傳遞 props 。

老版本的context api

import react,  from 'react';

import proptypes from 'prop-types';

const topic = (props) =>

const comment = (props, context) =>

)}comment.contexttypes =

getchildcontext() ;

} render()

} color: proptypes.string

}

新版本16.3 context

import react,  from 'react';

// 第一步,建立 context

const mycontext = react.createcontext()

// 第二步,建立 provider component

class myprovider extends component

render() )}}

const family = (props) =>

class person extends component ) => my age is

}

);}}

render()

}

const  = react.createcontext(defaultvalue);

老版本React 中的生命週期函式

生命週期函式指在某乙個時刻元件會自動呼叫執行的函式 constructor當元件建立的時刻會被元件自動呼叫執行,它也是初始化的位置.在這裡定義 state,接收 props,但是它是 es6 語法中就帶的 render 函式當資料 state 和 props 發生改變 發生變化的時刻元件會自動呼叫執...

openssl老版本編譯

將命令提示符定位到e openssl 1.0.2h。輸入perl configure vc win32 openssldir e openssl 2012 輸入ms do nasm。將命令提示符定位到d program files microsoft visual studio 11.0 vc bi...

老版本WTS WAF bypass小記

挖漏洞的時候總是會遇到waf,繞過記錄 view.asp?big 75 id 1漏洞點在id引數 新增單引號報錯 來一波老套的id 1 and 1 1,出現防火牆 老版本wts waf繞過很簡單,在關鍵字裡面加 符號即可 成功繞過 猜表名,這個地方使用burpsuite暴力跑就行,也可以手動測一些比...