react第四天学习笔记

1.react-hooks:主要是为了函数组件中状态值的提供:(这样子代码比类组件更简洁)

　　1)useState:类似于类组件中的state, fx：const [value,setValue()] = useState(0)   这方法传的参数是默认值  返回值为数组,第一个值为state,第二个相当于setState方法

　　2)useEffect:类似类组件中的componentDidMount()和componentDidUpdate方法,里面传参为回调函数,只要组件挂载或更新成功都会触发此回调函数;

2.react中提供了context的api用于跨组件进行传值,使用createContext创建对象,此对象里包含了Provider和Consumer组件

　　1)Provider:数据的提供者,包于根组件的外部,里面有的value参数,里面用于接收需要传输的值(Provider可以进行简单的封装方便提供状态和改变状态的方法)

　　2)Consumer:只要是Provider的任何子代组件都可以通过此组件拿值,这组件的childrean必须为函数,此函数传进来的参数就是Provider传的参数

3.HOC高阶组件用于装饰组件(就是给其他组件提供一些相似的装饰)

4.让cra支持@装饰器写法

　　1)不管你是要配置什么,我们最好使用react-app-rewired这个包对cra创建的项目进行轻微的配置调整

　　2)安装好之后,在package.json里把scripts里的react-scripts替换成react-app-rewired

　　3)在根目录下创建一个config-overrides.js

　　　　module.exports = (config)=>{

　　　　　　//在这里进行配置

　　　　　　return config

　　　　}

　　4)如果想要配置更方便,可以在安装customize-cra,然后把上面的js内容改成这样

　　　　const {override, addDecoratorsLegacy} = require('customize-cra')

　　　　　　module.exports = override(

　　　　　　　　addDecoratorsLegacy()

　　　　　　}

　　　　)

5.Redux使用的三大原则:

　　1)唯一的数据源

　　2)状态是只读的

　　3)数据的改变必须通过纯函数来完成