update: --

Author: webVueBlog

README.md

@@ -252,7 +252,9 @@
 - [JSX到JavaScript的转换](./react/JSX到JavaScript的转换.md)
 - [ReactElement](./react/ReactElement.md)
 - [react-component](./react/react-component.md)
-
+- [react-ref](./react/react-ref.md)
+- [forward-ref](./react/forward-ref.md)
+- [context](./react/context.md)
 
 
 

react/context.md

@@ -0,0 +1,28 @@
+## Context 两种方式
+
+1. childContentType
+2. createContext
+
+```js
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const { Provider, Consumer } = React.createContext('default')
+
+class Parent extends React.Component {
+ state = {
+  ChildContext: '123',
+  newContext: '456',
+ }
+
+ getChildContext() {
+  return { value: this.state.childContext }
+ }
+
+ render() {
+  return (
+   <>
+  )
+ }
+}
+```

react/forward-ref.md

@@ -0,0 +1,34 @@
+## forwardRef
+
+```js
+// 获取某个节点的实例
+import React from 'react'
+
+const TargetCompont = React.forwardRef((props, ref) => {
+ <input type="text" ref={ref}/>
+})
+
+export default class Comp extends React.Component {
+ constructor() {
+  super()
+  this.ref = React.createRef();
+ }
+
+ componentDidMount() {
+  this.ref.current.value = 'ref get input'
+ }
+
+ render() {
+  return <TargetCompont ref={this.ref} />
+ }
+}
+```
+
+```js
+export default function forwardRef<Props, ElementType:>
+
+return {
+ $$typeof: REACT_FORWARD_REF_TYPE,
+ render,
+};
+```

react/react-ref.md

@@ -0,0 +1,57 @@
+## createRef 和 ref
+
+> ref的三种使用方式
+
+string ref
+
+function
+
+createRef
+
+```js
+
+constructor() {
+ super()
+ this.objRef = React.createRef()
+
+ // {current: null}
+}
+
+componentDidMount() {
+ setTimeout(() => {
+  // {this.refs.ref1.textContent}
+  // {this.ref2.textContent}
+  // {this.ref3.textContent}
+  this.refs.stringRef.textContent = 'striing ref got'
+  this.methodRef.textContent = 'method ref got'
+  this.objRef.current.textContent = 'obj ref got'
+ }, 1000)
+}
+
+render() {
+ return (
+  <>
+   <p ref="stringRef">span1</p>
+   <p ref={ele => (this.methodReef = ele)}>span3</p>
+   <p ref={this.objRef}>span3</p>
+
+  </>
+ )
+}
+```
+
+
+```js
+import type {RefObject} from 'shared/ReactTypes';
+
+export function createRef(): RefObject {
+ const crfObject = {
+  current: null,
+ };
+ if(__DEV__) {
+  Object.seal(refObject);
+ }
+ return refObject;
+}
+```
+