react学习小结

1.什么是react?
    一个用于构建JavaScript的库
2.react特点?
    -声明式
    -组件式
3.掌握react的基本使用?
    react:18.0.0和之前版本的使用方法不一样,下面使用的是17.0.0版本的
        <div id="app"></div>
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <script>
            const title = React.createElement("h1",{title:"我是标题"},"Hello Reacr !",React.createElement("p",{className:"show"},"我是p标签"))
            ReactDOM.render(title,document.getElementById("app"))
        </script>
4.能够使用能够使用react脚手架?
    (1)npm i react react-dom        安装脚手架
    (2)npx create-react-app my-app  创建初始化项目
    (3)cd my-app    切换路径
    (4)npm start    运行项目
5.JSX产生的原因:
    JSX是js的扩展
    原因:通过 createElement()方法创建的React元素有一些问题
        -代码繁琐不简洁
        -结构不直观,无法一眼看出描述结构
        -不优雅,用户体验不好
    具有的优点:提高效率
6.react组件优点:
    -可复用性
    -独立性
    -可组合性
7.组件:
    -函数组件  使用箭头函数的时候要注意是圆括号还是花括号,花括号是js运行环境,需要返回(return)才行
    -类组件(常用)  
        7.1阻止浏览器默认行为   -e.preventDefault()
        7.2文本框 -文本框修改属性使用target,而不是修改数据的state
8.props:
    -构造函数形式 接收数据 props的值只能读不能修改
    -props属性:
        8.1 children属性   {props.children}
            children属性可以为函数,组件,节点
        8.2 props校验   2.1常见类型：array,bool,func,number,object,string   optionalFunc:PropTypes.func,
                        2.2React元素类型：element   
                        2.3必填项：isRequired    requiredFunc:PropTypes.func.3必填项：isRequired,
                        2.4特定结构对象：shape({ })   optionalObjectWithShape:PropTypes.shape({
                          color:PropTypes.string,
                          fontSize:PropTypes.number
                        })
        8.3 props默认值
                Bpp.defaultProps = {
                  pageSize:10
                }
9.数据传递(4种):
    -父传子:
        父组件传递数据给子组件: <Child name={this.state.lastName}/>
        子组件props接收:
            -构造函数形式  {props.name}
            -类组件形式    {this.props.name}
    -子传父:
        父组件:提供回调函数，用来接收数据 <Child getBack = {this.getBack}/>
        子组件调用:this.props.getBack(this.state.msg)
    -兄弟传:
        把数据和函数都存放在父组件里,通过props调用达到兄弟传值效果
    -跨节点传输数据(Provider,Consumer):
        -1.创建context得到两个组件  let {Provider,Consumer} = React.createContext()
        -2.在要传递数据的组件使用Provider包裹   <Provider value='pink'>
                                                <div>
                                                   <Node/>
                                                </div>
                                               </Provider>

        -3.在要接收数据的组件使用Comsumer包裹     <Consumer>
                                                    {(data)=>(<span>我是子节点--{data}</span>)}
                                                </Consumer>
10.组件的生命周期:
    -10.1 创建时
        -constructor:(1)初始化数据(2)为事件函数绑定this
        -componentDidMount:组件挂载后或者DOM渲染后触发 (1)进行DOM操作(2)发送axios请求
    -10.2 更新时:New props,setState(),forceUpdate()任意一种变化组件都会重新渲染
        -componentDidUpdate:组件更新完成或者DOM渲染完触发 (1)进行DOM操作(2)发送axios请求
    -10.3 卸载时
        -componentWillMount:组件卸载时触发 (1)执行清理工作,把组件自定义功能清除
11.setState()更新数据
    -11.1 异步更新,可以有回调函数
        -参数一:更新状态    (state,props)=>{}
        -参数二:更新后,可以操作DOM ()=>{}  相当于使用componentDidUpdate钩子函数
    -11.2 组件更新机制:父组件重新渲染是,子组件也会重新渲染,但只会渲染当前组件子树(即当前组件及其所有子组件)
    -11.3 代码优化:减轻state => 不写与渲染无关的    方案:把无关的放到this里
12.render-porps模式的状态逻辑
    -render-props模式和高阶组件都可以实现组件状态逻辑的附庸
    -render-porps模式:
        1.获取props:添加一个值为函数的props,通过函数参数来获取
        2.渲染props:通过函数return出去
        3.定义一个有状态和方法的组件,然后渲染 返回return this.props.children(this.state),添加校验
13.高阶组件的状态逻辑  
    -创建高阶组件采用包装模式(把一些功能封装到高阶组件里面) 函数的参数 WrappedComponent(参数就是要被包裹的组件)
    -问题:渲染出来的组件名字一样?解决方法设置displayName:WithMouse(高阶组件的名字) ${getDisplayName(WrappedComponent)(要传进来的参数名字)
        常用    displayName 方法
                function getDisplayName(WrappedComponent){
                    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
                }
14.纯组件:React.PureComponent{}
    -原理:对比前后两次props和state的值,来决定是否渲染页面
    -解决了麻烦的钩子函数问题,自动实现了shouldComponentUpdate(nextState,nextProps){return 布尔值-true渲染,false阻止渲染}
15.虚拟DOM和diff算法
    15.1 虚拟DOM 
        -虚拟DOM本质是一个js对象,相当于react元素.
        -虚拟DOM让react脱离了浏览器环境束缚,只要有js的地方就能运行虚拟DOM,提升性能只是顺带的
        -优点:(1)减少了DOM操作.例如:有一千个节点,真实DOM需要一个一个渲染,而虚拟DOM则是将一千个节点打包渲染
              (2)虚拟DOM借助diff算法把多余的操作省掉.例如:原组件中要添加一个节点,真实的DOM全部重新渲染,而虚拟DOM则是只渲染新旧组件中不同的地方
        -缺点:严重依赖打包工具,要添加额外的构建过程
    15.2 虚拟DOM和diff算法  
        -对比新旧两个虚拟节点,找出不同的地方,然后返回一个补丁(patch),然后根据patch记录的不同来更新DOM