useContext
全新的 Context API 能夠很容易穿透組件而無反作用,其包含三部分:React.createContext,Provider,Consumer。
- React.createContext 是一個函數,它接收初始值並返回帶有 Provider 和 Consumer 組件的對象;
- Provider 組件是數據的發佈方,通常在組件樹的上層並接收一個數據的初始值;
- Consumer 組件是數據的訂閱方,它的 props.children 是一個函數,接收被髮布的數據,而且返回 React Element;
const ThemeContext = React.createContext("light");
// 用該組件包裹被使用組件的父級組件
class ThemeProvider extends React.Component {
state = { theme: "light" };
render() {
return (
<ThemeContext.Provider value={this.state.theme}>
{this.props.children}
</ThemeContext.Provider>
);
}
}
// 使用
class ThemedButton extends React.Component {
render() {
return (
<ThemeContext.Consumer>
{theme => <Button theme={theme} />}
</ThemeContext.Consumer>
);
}
}
// function裏面使用
function funcThemedButton(){
const theme = useContext(ThemeContext);
return <Button theme={theme} />
}
forwardRef
React.forwardRef
是
Ref
的轉發, 它可以
讓父組件訪問到子組件的 Ref
,從而操做子組件的
DOM
。
React.forwardRef
接收一個函數,函數參數有
props
和
ref
。
const TextInput = React.forwardRef((props, ref) => (
<input type="text" placeholder="Hello forwardRef" ref={ref} />
));
const inputRef = React.createRef();
class App extends Component {
handleSubmit = event => {
event.preventDefault();
alert("input value is:" + inputRef.current.value);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<TextInput ref={inputRef} />
<button type="submit">Submit</button>
</form>
);
}
}