react 学习笔记

useEffect：

https://blog.csdn.net/sofeware333/article/details/105943747

https://www.jianshu.com/p/6e525c3686ab

React Context

const {Provider, Consumer} = React.createContext(defaultValue);

1. App.js 父组件

//App.js
import React from 'react';
import Son from './son';//引入子组件
// 创建一个 theme Context,
export const {Provider,Consumer} = React.createContext("默认名称");
export default class App extends React.Component {
    render() {
        let name ="小人头"
        return (
            //Provider共享容器 接收一个name属性
            <Provider value={name}>
                <div style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>
                    <p>父组件定义的值:{name}</p>
                    <Son />
                </div>
            </Provider>
        );
    }
}

son.js 子组件

//son.js 子类
import React from 'react';
import { Consumer } from "./index";//引入父组件的Consumer容器
import Grandson from "./grandson.js";//引入子组件
function Son(props) {
    return (
        //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
        <Consumer>
            {( name ) =>
                <div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
                    <p>子组件。获取父组件的值:{name}</p>
                    {/* 孙组件内容 */}
                    <Grandson />
               </div>
            }
        </Consumer>
    );
}
export default Son;

grandson.js 孙组件

//grandson.js 孙类
import React from 'react';
import { Consumer } from "./index";//引入父组件的Consumer容器
function Grandson(props) {
    return (
         //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
        <Consumer>
            {(name ) =>
                   <div style={{border:'1px solid green',width:'60%',margin:'50px auto',textAlign:'center'}}>
                   <p>孙组件。获取传递下来的值:{name}</p>
               </div>
            }
        </Consumer>
    );
}
export default Grandson;

链接：https://www.jianshu.com/p/65b348bf86ad

react hooks - useState 使用

https://www.jianshu.com/p/9fae8781b5ac

const [flow, setFlow] = useState({});

点击时触发onShowDrawer

const onShowDrawer = async record => {

    setTimeout(() => {

      setDelay(true);

      setFlow(JSON.parse(record.templateFlow));

    }, 100);

    setProjectId(record.id);

    setDrawerVisible(true);

    const res = await getVegetationScatter.run(record.id, {start:format(pickerValue[0]), end: format(pickerValue[1])});

    setVegetationScatter(res.data)

  };

React—useRef

https://blog.csdn.net/sofeware333/article/details/105943747