正文

react学习笔记总结(代码片段)

IT_Holmes  IT_Holmes  2022-10-24  233

关键词：

文章目录

1. React 之 props的使用
2. React 之对props进行限制
3. React 之 props只读 (知道修改在这是什么效果！)
4. React 之 props简写方式
5. 类式组件中的构造器与 props的注意事项
6. 函数式组件使用props
7. 类式组件字符串形式的refs属性
8. React 之回调形式ref
9. jsx的注释形式
9. React 之回调形式ref的调用次数问题
9. createRef API的使用
10. React的事件处理的过程
11. 勿过度使用Refs
12. React 之非受控组件
13. React 之受控组件
14. 高阶函数和柯里化
- 14.1 高阶函数和柯里化的概念
- 14.2 react的代码简化

1. React 之 props的使用

在组件上面，声明属性，会直接放到实例对象的props属性中。

这样外部组件传递过来的值，就可以直接调用了。

<script type="text/babel">
    // 创建组件
    class Person extends React.Component
        render() 
            console.log(this)
            let name,age,sex = this.props
            return (
                <div>
                    <ul>
                        <li>姓名:name</li>
                        <li>性别:age</li>
                        <li>年龄:sex</li>
                    </ul>
                </div>
            );
        
    
    // 渲染组件到页面
    ReactDOM.render(<Person name="tom" age="18" sex="男"/>,document.getElementById('test'))
</script>

** …xxx 叫做展开运算符：**

注意：展开运算符，不能展开对象！

对于对象，扩展运算符可以用来做浅复制、合并的操作。

在React中就可以使用这种方式，因为babel和react是能够进行加工操作的！

props的写法有以下两种：(知道就好，第一种已经弃用。)

注意：Person.propTypes 与 PropTypes.string 的 propsTypes大小写。容易写错！

2. React 之对props进行限制

对组件的props进行限制，就需要到了prop-types.js功能包。

引入prop-types.js：用于对组件标签属性进行限制。

第一步：引入prop-types.js。
第二步：配置Person.propTypes = 定义属性类型、是否必须等。
第三步：配置Person.defaultProps = 默认值。

<body>
    <!-- 1. 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>

    <!-- 2. 引入react-dom,用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!-- 3. 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 4.引入prop-types.js：用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        // 创建组件
        class Person extends React.Component
            render() 
                console.log(this)
                // 调用的时候直接调用props里面的函数。
                this.props.speak()
                let name,age,sex = this.props
                return (
                    <div>
                        <ul>
                            <li>姓名:name</li>
                            <li>性别:age + 10</li>
                            <li>年龄:sex</li>
                        </ul>
                    </div>
                );
            
        

        // react底层会自动走propTypes，来对Person的props进行限制。
        // 可以设置类型，设置是否必须等等。
        Person.propTypes = 
            name:PropTypes.string.isRequired,
            sex:PropTypes.string,
            age:PropTypes.number,
            speak:PropTypes.func // 如果传入函数就是func
        
        // 指定默认标签属性值，也就是设置属性默认值。
        Person.defaultProps = 
            sex: '不男不女',
        

        function speak()
            console.log('我说话了')
        

        const p = name:'老刘',age:18
        // 渲染组件到页面
        ReactDOM.render(<Person ...p speak=speak/>,document.getElementById('test'))
    </script>
</body>

3. React 之 props只读 (知道修改在这是什么效果！)

React的props是只读的。

搞懂：修改什么意思，可以理解为重新赋值的意思。就是地址发生改变。

4. React 之 props简写方式

其实下面的代码就是往Person里面添加属性，那么可以直接简写到Person类中：

// react底层会自动走propTypes，来对Person的props进行限制。
// 可以设置类型，设置是否必须等等。
Person.propTypes = 
    name:PropTypes.string.isRequired,
    sex:PropTypes.string,
    age:PropTypes.number,
    speak:PropTypes.func // 如果传入函数就是func

// 指定默认标签属性值，也就是设置属性默认值。
Person.defaultProps = 
    sex: '不男不女',

简写形式如下：

class Person extends React.Component
	// 定义props属性
    static propTypes = 
        name:PropTypes.string.isRequired,
        sex:PropTypes.string,
        age:PropTypes.number,
        speak:PropTypes.func // 如果传入函数就是func
    
	// 定义props默认值
    static defaultProps = 
        sex: '不男不女',
    

    render() 
        // 调用的时候直接调用props里面的函数。
        this.props.speak()
        let name,age,sex = this.props
        return (
            <div>
                <ul>
                    <li>姓名:name</li>
                    <li>性别:age + 10</li>
                    <li>年龄:sex</li>
                </ul>
            </div>
        );

5. 类式组件中的构造器与 props的注意事项

类式组件构造器，在react中，仅用到以下两种情况：

通过给this.state 赋值对象来初始化内部state。
为事件处理函数绑定实例。

注意点：

如果，不需要初始化constructor构造器，无影响。
如果，需要初始化了constructor构造器并且希望在构造器中通过this访问props，则必须要接受props和实现super(props)，不然拿不到props！

几乎开发当中不会使用构造器的！

6. 函数式组件使用props

三大属性：state，props，refs。

函数式组件只能使用props，其他两个都不能使用。

props作为参数传递，并且限制props属性直接在外面定义就可以。

<script type="text/babel">
    function Person(props)
        const name,sex,age = props
        return (
            <ul>
                <li>姓名：name</li>
                <li>性别：sex</li>
                <li>年龄：age + 1</li>
            </ul>
        )
    
    Person.propType = 
        name:PropTypes.string.isRequired,
        sex:PropTypes.string,
        age:PropTypes.number
    
    Person.defaultProps = 
        sex:'不男不女',
        age:18
    
    ReactDOM.render(<Person name="zhangsan" age=1/>,document.getElementById('test'))
</script>

7. 类式组件字符串形式的refs属性

类式组件refs属性存折对应ref标识，与id作用差不多。

通过refs属性就可以操作对应dom节点：

<script type="text/babel">
    class Demo extends React.Component 

        // 展示左侧输入框的数据
        showData = ()=>
            const input1 = this.refs
            alert(input1.value)
        
        // 展示右侧输入框的数据
        showDate2 = () => 
            const input2 = this.refs
            alert(input2.value)
        

        render() 
            return (
                <div>
                    <input ref="input1" type="text" placeholder="点击按钮提示数据"/>
                    <button ref="button1" onClick=this.showData>点我提示左侧的数据</button> &nbsp;
                    <input ref="input2" onBlur=this.showDate2 type="text" placeholder="失去焦点提示数据"/>
                </div>
            );
        
        
    
    // 渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

官方对字符串形式的refs给出的解释：

存在一些效率问题。

8. React 之回调形式ref

通过回调函数的形式来实现：

// 通过回调函数的形式来给this赋值。
render() 
    return (
        <div>
            <input ref=c=>this.input1 = c type="text" placeholder="点击按钮提示数据"/>
        </div>
    );

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 1. 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>

    <!-- 2. 引入react-dom,用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!-- 3. 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 4.引入prop-types.js：用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Demo extends React.Component 

            // 展示左侧输入框的数据
            showData = ()=>
                const input1 = this
                alert(input1.value)
            
            // 展示右侧输入框的数据
            showDate2 = () => 
                const input2 = this
                alert(input2.value)
            

            // 通过回调函数的形式来给this赋值。
            render() 
                return (
                    <div>
                        <input ref=c=>this.input1 = c type="text" placeholder="点击按钮提示数据"/>
                        <button onClick=this.showData>点我提示左侧的数据</button> &nbsp;
                        <input onBlur=this.showDate2 ref=c=>this.input2 = c  type="text" placeholder="失去焦点提示数据"/>
                    </div>
                );
            

        
        // 渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

9. jsx的注释形式

通过使用将其转换为js表达式再通过/**/来注释。

render() 
    return (
        <div>
            <input ref=c=>this.input1 = c type="text" placeholder="点击按钮提示数据"/>
            /*<button onClick=this.showData>点我提示左侧的数据</button> &nbsp;*/
            <input onBlur=this.showDate2 ref=c=>this.input2 = c  type="text" placeholder="失去焦点提示数据"/>
        </div>
    );

9. React 之回调形式ref的调用次数问题

内联函数指的是直接在标签上面定义的函数。

对于ref的内联函数回调，更新dom会出现的二次调用的情况：

第一次初始化页面的时候，ref里面的回调函数就会被调用一次。
之后，只要类式组件的render函数被调用(更新dom)，那么更新中ref里面的函数会调用两次，第一次参数c(currentNode)为null，第二次参数c(currentNode)就会是当前的节点。第一次为null是因为要清空一下。

上面函数有对应解决办法，可以将函数放到this类实例对象当中，这样就可以直接调用了。不用再写内联函数了。

两种情况都可以，但是知道两者的区别。

9. createRef API的使用

React.createRef()调用后可以返回一个容器，该容器可以存储被ref所标识的节点。

注意：React.createRef()只能锁定一个节点，专人专用！

class Demo extends React.Component 
    /*
        React.createRef()调用后可以返回一个容器，该容器可以存储被ref所标识的节点，不过它只能锁定一个节点，专人专用！。
     */
    myRef = React.createRef()
    showData = ()=>
        console.log(this.myRef.current)
    
    render() 
        return (
            <div>
                <input ref=this.myRef type="text" placeholder="点击按钮提示数据"/>
                <button onClick=this.showData>点我提示左侧的数据</button>
            </div>
        );
    

// 渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))

原理：走到input ref=this.myRef的时候，检测到是一个通过React.createRef()创建的容器，就会把自身节点存到里面。

目前，推荐官方使用的一种形式。但是很多开发依然用的内联函数。

10. React的事件处理的过程

React的是通过onXxx属性指定事件处理函数，注意中间是大小写。

React使用的是自定义(合成)事件【为了更好的兼容性】，而不是使用的原生的DOM事件。
React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)。
所谓的事件委托将事件像冒泡一样委托给了最外层的元素。

11. 勿过度使用Refs

通过event.target得到发生事件的DOM元素对象：

官方给出一个 勿过度使用Refs ，其实很多时候可以直接使用event.target来获取当前节点。

12. React 之非受控组件

非受控组件就是现用现取：

就像下面input输入，点击登录才会走react的onSubmit事件。

<script type="text/babel">
    // 创建组件
    class Login extends React.Component

        handlerSubmit = (event)=>
            const username,password = this
            alert(`$username.value,$password.value`)
            // 阻止form表单提交
            event.preventDefault() //组织form表单默认事件。
        

        render() 
            return (
                <div>
                    <form action="http://www.itholmes.com" onSubmit=this.handlerSubmit>
                        用户名：<input ref=c => this.username = c type="text" name="username"/>
                        密码：<input ref=react学习笔记总结(代码片段)
文章目录1.React(v16.8版本)生命周期2.React(v16.8版本)生命周期更新流程2.1三个更新流程2.2setState()的生命周期流程(对应上图2号线)2.3forceUpdate()的生命周期流程(对应上图3号线)2.4父组件render()渲染的生命周期流程(对应上图1号线)2.5React(v...  查看详情  
                
react学习笔记总结(代码片段)
文章目录1.React简介2.React的核心工具库3.实现一个React的实例4.React两种创建虚拟DOM的方式5.虚拟DOM与真实DOM的对比6.jsx语法规则7.jsx实战练习8.React开发者工具安装9.React函数式组件10.js的类相关知识11.React类式组件12.组件实例对象的...  查看详情  
                
react学习笔记总结(代码片段)
文章目录1.React简介2.React的核心工具库3.实现一个React的实例4.React两种创建虚拟DOM的方式5.虚拟DOM与真实DOM的对比6.jsx语法规则7.jsx实战练习8.React开发者工具安装9.React函数式组件10.js的类相关知识11.React类式组件12.组件实例对象的...  查看详情  
                
react学习笔记总结(代码片段)
文章目录1.redux介绍2.redux工作流程3.redux的使用4.redux完整结构补充5.redux的异步action6.react-redux库与redux库7.react-redux库的实战8.react-redux的connect最精简写法9.react-redux的Provider组件作用10.react-redux整合UI组件和容器组件11.redux的combineReduce  查看详情  
                
react学习笔记总结(代码片段)
文章目录1.React之props的使用2.React之对props进行限制3.React之props只读(知道修改在这是什么效果！)4.React之props简写方式5.类式组件中的构造器与props的注意事项6.函数式组件使用props7.类式组件字符串形式的refs属性8.React之回调形...  查看详情  
                
react学习笔记总结(代码片段)
文章目录1.React之props的使用2.React之对props进行限制3.React之props只读(知道修改在这是什么效果！)4.React之props简写方式5.类式组件中的构造器与props的注意事项6.函数式组件使用props7.类式组件字符串形式的refs属性8.React之回调形...  查看详情  
                
react学习笔记总结(代码片段)
文章目录1.创建组件流程(以及脚手架环境流程)2.样式的模块化3.常用快捷生成4.通用性组件编码流程5.React脚手架配置代理5.1React引入ajax库5.2第一种配置代理方式(package.json)5.3第二种代理方式(setupProxy.js)6.ReactList列表效果实现7.React...  查看详情  
                
react学习笔记总结(代码片段)
react-router6版本的学习笔记。文章目录一、ReactRouter6二、router6版本的安装和一级路由1.安装router6版本2.Routes组件和Route的element属性三、router6之重定向四、router6的NavLink高亮五、router6的useRoutes路由表(重要)六、router6的嵌套路由七、r...  查看详情  
                
react学习笔记总结(代码片段)
针对React拓展相关的学习。文章目录一.React项目打包二.React扩展之setState两种写法三.React扩展之lazyLoad(懒加载)四、React的stateHook五、React的EffectHook六、React的RefHook七、React的Fragment八、React的Context九、React的PureComponent1.Component组件...  查看详情  
                
react学习笔记总结(代码片段)
react-router6版本的学习笔记。文章目录一、ReactRouter6二、router6版本的安装和一级路由1.安装router6版本2.Routes组件和Route的element属性三、router6之重定向四、router6的NavLink高亮五、router6的useRoutes路由表(重要)六、router6的嵌套路由七、r...  查看详情  
                
react学习笔记总结(代码片段)
文章目录1.redux介绍2.redux工作流程3.redux的使用4.redux完整结构补充5.redux的异步action6.react-redux库与redux库7.react-redux库的实战8.react-redux的connect最精简写法9.react-redux的Provider组件作用10.react-redux整合UI组件和容器组件11.redux的combineReduce...  查看详情  
                
react学习笔记基础(代码片段)
文章目录jsx语法组件this.propsthis.refs.refNamethis.state事件监听生命周期constructor(props,context)componentWillMount()render()componentDidMount()componentWillReceiveProps(nextProps)shouldComponentUpdate(nextProps,nex  查看详情  
                
react学习笔记(代码片段)
Babel转译器这是react自带的一个编译器props和states一个是组件外部的，一个是组件内部的jsx代表objects.Hello.jsimportReactfrom‘react‘;exportdefault(name)=><h1>Helloname!</h1>;index.html<divid="root"></div>&n  查看详情  
                
react学习总结(代码片段)
初始配置$1创建基本的webpack项目创建目录npminit-y创建package.jsoncnpmiwebpackwebpack-cli-D安装webpackwebpack-cli包在根目录创建webpack.config.js并写入相应代码module.exports=mode:‘development‘终端里输入webpack进行打包，之后dist文件夹里多出个main.j...  查看详情  
                
笔记react学习与记录(代码片段)
react学习与记录基础精讲起步src->App.js、index.js响应式设计思想和事件绑定计数器增减和循环案例写法注意面向对象拆分组件与组件间传值父组件向子组件传递数据子组件向父组件传递数据代码代码优化围绕react衍生出的思考reac...  查看详情  
                
react学习笔记(代码片段)
...件时React最重要的内容，组件表示页面中的部分内容学习一次，随处使用使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用2.React基本使  查看详情  
                
react学习阶段性总结(代码片段)
React简介React是一个用于构建用户界面的JAVASCRIPT库，主要用于构建UI。React由美国的公司Facebook在2013年发布特点：1.声明式设计−React采用声明范式，可以轻松描述应用。2.高效−React通过对DOM的模拟，最大限度地减...  查看详情  
                
react学习笔记(代码片段)
...质量是比较高的，课程对新手友好，非常详细。学习的起点教程推荐是使用脚手架，需要电脑安装nodejs环境&#  查看详情

正文

react学习笔记总结(代码片段)

文章目录

1. React 之 props的使用

2. React 之 对props进行限制

3. React 之 props只读 (知道修改在这是什么效果！)

4. React 之 props简写方式

5. 类式组件中的构造器 与 props的注意事项

6. 函数式组件 使用props

7. 类式组件字符串形式的refs属性

8. React 之 回调形式ref

9. jsx的注释形式

9. React 之 回调形式ref的 调用次数问题

9. createRef API的使用

10. React的 事件处理的 过程

11. 勿过度使用Refs

12. React 之 非受控组件