react学习笔记-6

最新推荐文章于 2024-09-11 17:09:49 发布

zhaoyin1994

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量993

点赞数 21

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/zhaoyin1994/article/details/140880971

版权

1.react中的三大核心属性：state（状态）

总结：

使用类组件，使用了构造器的话必须使用super()方法，继承从构造函数中的属性和方法。
用props接口组件传参。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 根节点 -->
     <div id="root"></div>
    <!-- 导入 -->
    <script src="./lib/react.js"></script>
    <script src="./lib/react-dom.js"></script>
    <script src="./lib/babel.js"></script>
    <!-- script代码 -->
     <script type="text/babel">
        // 获取渲染节点
        const root=ReactDOM.createRoot(document.querySelector('#root'))
       
        // 定义组件
        class App extends React.Component{
            // 组件数据
            constructor(props){
                super(props)
                this.state={
                    isHot:false,
                    message:'Hello World'
                }
            }
            // 渲染内容
            render(){
                const {message}=this.state
                return(
                    <div>
                        <h2>今天天气很{this.state.isHot?'炎热':'凉爽'}</h2>
                    </div>
                )
            }
        }
        // render函数渲染组件
        root.render(<App/>)

     </script>
</body>
</html>

2.react中事件绑定

总结：

2.1、通过标签上面添加onClick={demo}的方法绑定事件，onClick中的c是react封装了一层，需要大写；

2.2方法只需要写方法名，不需要写demo(),这样写的话会被绑定函数的返回值，而不是函数本身；

2.3绑定的事件是在组件外部，在组件内部标签调用。

<script type="text/babel">
        // 获取渲染节点
        const root=ReactDOM.createRoot(document.querySelector('#root'))
       
        // 定义组件
        class App extends React.Component{
            // 组件数据
            constructor(props){
                super(props)
                this.state={
                    isHot:false,
                    message:'Hello World'
                }
            }
            // 渲染内容
            render(){
                const {message}=this.state
                return(
                    <div>
                        <h2 onClick={demo}>今天天气很{this.state.isHot?'炎热':'凉爽'}</h2>
                    </div>
                )
            }
        }
        function demo(){
            console.log('函数被调用了')
        }
        // render函数渲染组件
        root.render(<App/>)

     </script>

3.解决类组件中的this指向问题

3.1绑定的时候回调交互需要访问到页面中的state,所以将state放到了组件内部，通过this.demo的方式绑定方法；

3.2 构造器内部需要通过this.demo=改变this指向的方法，在组件实例中加一个方法，此时就可以访问组件中的状态state了

4.setState的使用：

react中的state状态不能直接修改，而是要通过setState这个方法去修改，这种修改的方式是合并的方式，不会覆盖掉类中其他的状态
如果state中的数据发生改变，那么render函数就会调用一次，执行一次渲染

5.state的简写方式

（实际项目开发中使用的方式：）

5.1状态通过state={}直接复制的方式，不需要写构造器

5.2方法通过赋值语句+箭头函数的方式定义，箭头函数没有this,thiis指向外层的组件实例对象。

6.react中的三大核心属性：props

可以在组件使用的地方通过...解构对象的方式批量传入props属性，react做了封装可以使用此方法解构，其他地方对象是不能采用解构的方法解构的。

7.props的简写方式

总结：

1.将类型限制和默认值设置放在组件内部，优化代码结构，只需要在前面加static就会默认将方法加到组件的类本身身上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 根节点 -->
     <div id="root"></div>
    <!-- 导入 -->
    <script src="./lib/react.js"></script>
    <script src="./lib/react-dom.js"></script>
    <script src="./lib/babel.js"></script>
    <script src="./lib/prop-types.js"></script>
    <!-- script代码 -->
     <script type="text/babel">
        // 获取渲染节点
        const root=ReactDOM.createRoot(document.querySelector('#root'))
       
        // 定义组件
        class App extends React.Component{
           state={
                    message:'Hello World'
                }
            // 对标签属性进行类型，必要性的限制
            static propTypes={
                name:PropTypes.string.isRequired,//限制name必传，且为字符串
                sex:PropTypes.string//限制sex为字符串
            }
            //指定标签默认属性值
            static defaultProps={
                sex:'男',
                age:18

            }
            // 渲染内容
            render(){
                const {message}=this.state
                const {name,sex}=this.props
                return(
                    <div>
                        <h2>{message}</h2>
                        <h2>{name}</h2>
                        <h2>{sex}</h2>
                    </div>
                )
            }
        }
        const info={name:'小霞',sex:'女'}
        // render函数渲染组件
        root.render(<App {...info}/>)

     </script>
</body>
</html>

8.类组件中的构造函数

使用和不使用构造函数的区别：只有当需要在构造函数内部访问this实例的时候才使用构造器。所以基本上不用。

9.函数式组件使用props

总结：

1、函数式组件可以正常通过props接收参数

2、函数式组件的类型限制默认属性设置在组件函数外部定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 根节点 -->
     <div id="root"></div>
    <!-- 导入 -->
    <script src="./lib/react.js"></script>
    <script src="./lib/react-dom.js"></script>
    <script src="./lib/babel.js"></script>
    <script src="./lib/prop-types.js"></script>
    <!-- script代码 -->
     <script type="text/babel">
        // 获取渲染节点
        const root=ReactDOM.createRoot(document.querySelector('#root'))
        //函数式组件
        function App(props){
            const {name,sex}=props
            return(
                    <div>
                        <h2>{name}</h2>
                        <h2>{sex}</h2>
                    </div>
                )
        }
        // 函数式组件默认值和类型限制只能写在外部
        App.propTypes={
            name:PropTypes.string.isRequired,
            sex:PropTypes.string,
        }
        //指定标签默认属性值
        App.defaultProps={
                sex:'男',
                age:18

            }
       const info={name:'小霞',sex:'女'}
        // render函数渲染组件
        root.render(<App {...info}/>)

     </script>
</body>
</html>

10.props总结：

1、类型限制的propTypes第一个字母p是小写，这是因为react底层封装的属性就是 propTypes

2、设置的时候使用的PropsTypes必须驼峰大写，是因为这个方法是独立封装的一个方法，15.5以后都是单独调用，不需要通过React.PropsType的方式使用。

3、类组件中的构造器不是必须要写的，使用的场景很少。（只有在构造器内访问this组件实例的时候才需要使用）

11、组件实例三大属性：refs

（1）、字符串形式的ref

需求：自定义组件，功能如下：

1、点击按钮，提示第一个输入框中的值

2、当第二个输入框失去焦点时，提示这个输入框中的值

<script type="text/babel">
        // 获取渲染节点
        const root=ReactDOM.createRoot(document.querySelector('#root'))
       
        // 定义组件
        class App extends React.Component{
            showMessage=()=>{
               const{in1}=this.refs
               debugger
               alert(in1.value)
           }
           showMessage2=()=>{
            const{in2}=this.refs
               alert(in2.value)
           }
            // 渲染内容
            render(){
                return(
                    <div>
                       <input ref="in1" type="text" placeholder="点击按钮提示数据"/>
                       <button onClick={this.showMessage}>点我提示左侧的数据</button>
                    <input ref='in2' type="text" onBlur={this.showMessage2} placeholder="失去焦点提示数据"/>
                    </div>
                )
            }
        }
        // render函数渲染组件
        root.render(<App/>)

     </script>

(2)、回调形式的ref

通过回调的方式在this组件内让input1赋值真实dom元素

区别探讨：内联回调函数型的ref和绑定一个类绑定的ref主要的区别就是，组件更新的时候会执行两次，但是基本无伤大雅，可以忽略，工作项目中可以直接使用以上内联函数的方式。

12.createRef的使用

注意：是专人专用的，一个里面只能放一。

13.ref的总结：

1.ref的使用可以通过字符串形式的ref、回调函数的ref、绑定类回调函数的ref、createRef的方式（官方推荐）。

2.实际工作中不需要注意内联方式的ref，可以放心使用。

14.react中的事件处理

1、通过onXxx属性指定事件处理函数（注意大小写）

a、React使用的是自定义（合成）事件，而不是使用的原生Dom事件---为了更好的兼容

b、React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）

2、通过event.target得到发生事件的DOM元素对象----不要过度使用refs

15.非受控组件

定义：非受控组件就是form表单或者单选框，复选框，输入框这种只有在使用的时候获取到表单元素（现用现取的组件）

 <script type="text/babel">
        // 获取渲染节点
        const root=ReactDOM.createRoot(document.querySelector('#root'))
       
        // 定义组件
        class App extends React.Component{
            handleSubmit=(event)=>{
                // 阻止表单提交
                event.preventDefault()
                const {username,password}=this
                alert(`你输入的用户名是：'${username.value},你输入的密码是${password.value}`)
            }
           
            // 渲染内容
            render(){
                return(
                    <form action="" onSubmit={this.handleSubmit}>
                        用户名:<input ref={c=>this.username=c} type="text" name="username"/>
                        密码:<input ref={c=>this.password=c} type="password" name="password"/>
                        <button>登录</button>
                        </form>
                )
            }
        }
        // render函数渲染组件
        root.render(<App/>)

     </script>

16.受控组件

将表单数据维护到state状态里面，相当于vue中的数据双向绑定。页面数据实时更新

建议写受控组件，可以少使用ref

17.了解高阶函数和函数柯里化

1.高阶函数

概念：如果一个函数接收的参数是一个函数，或者调用后的返回值是一个函数，那么该函数就是高阶函数。常见的高阶函数有:Promise、setTimeout、arr.map()等等

2.函数柯里化

通过函数调用继续返回函数的形式，实现多次接收参数后最后统一编码的形式

注意：这里一定是通过[dataType]的方式取默认参数中的传递的属性，如果直接使用dataType会被当作字符串的属性值。

18.不用柯里化的写法

onChange后面绑定的必须是一个回调函数，因此通过箭头函数的方式，在函数体内调用saveFormData也可以实现函数传递参数的高阶函数。

zhaoyin1994

关注

21
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
react学习笔记-6

1、类型限制的propTypes第一个字母p是小写，这是因为react底层封装的属性就是 propTypes2、设置的时候使用的PropsTypes必须驼峰大写，是因为这个方法是独立封装的一个方法，15.5以后都是单独调用，不需要通过React.PropsType的方式使用。3、类组件中的构造器不是必须要写的，使用的场景很少。（只有在构造器内访问this组件实例的时候才需要使用）1.ref的使用可以通过字符串形式的ref、回调函数的ref、绑定类回调函数的ref、createRef的方式（官方推荐）。
复制链接

扫一扫