React基础 | 笔记 | （更新中）

哈哈的学习小窝

已于 2022-07-06 10:45:09 修改

阅读量274

点赞数

文章标签： javascript 开发语言 react react.js 前端框架

于 2022-07-05 21:38:10 首次发布

本文链接：https://blog.csdn.net/weixin_63637469/article/details/125628330

版权

本文详细介绍了React的基础概念，包括虚拟DOM、JSX语法、组件的三大核心属性（props、state和refs）以及事件处理。强调了React的面向组件编程思想，并探讨了生命周期方法、组件优化策略、懒加载和Hooks等高级特性。同时，文章通过实例展示了如何使用createRef和事件处理，以及非受控和受控组件的概念。此外，还涵盖了React的状态管理和通信方式，如Context API和render props。

摘要由CSDN通过智能技术生成

React概念

好处

使用原生js实现添加元素

<body>
    <ul id="list"></ul>
<script>
    let person = [
        {
            id : '001',
            name : '张三',
            age : 18
        },{
            id : '002',
            name : '李四',
            age : 20
        },{
            id : '003',
            name : '王五',
            age : 22
        }
    ];
    let htmlStr = '';

    person.forEach((person)=>{
        htmlStr += `<li>${person.name}-${person.age}</li>`;
    })
    document.getElementById('list').innerHTML = htmlStr;
</script>
</body>

使用react实现添加元素

Hello React

<div id="test">
    </div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel.js文件，将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        **//表示这里写的不是js，而是jsx，需要babel转换**

        **//1.创建虚拟dom**
       ** ****const VDOM = <h1>Hello,React</h1>**** ** **//此处可以不用写引号,是虚拟dom**

        **//2.渲染虚拟dom到页面
        //接收两个参数，第一个参数是需要渲染的dom，第二个参数是容器**
        **ReactDOM.render(VDOM,document.getElementById('test'))**
        
    </script>

虚拟dom

使用js

//1.创建虚拟dom
        const VDOM = React.createElement('h1',{id:'title'},'Hello,React')  
        //此处可以不用写引号,是虚拟dom
        //参数1 标签名 参数2 标签属性 参数3 元素

使用jsx

 //1.创建虚拟dom
        const VDOM = (
            <h1 id="title">
                <span>Hello,React</span>
            </h1>)
        //2.渲染虚拟dom到页面
        //接收两个参数，**第一个参数是需要渲染的dom**，**第二个参数是容器**
        ReactDOM.render(VDOM,document.getElementById('test'))

概念及优点

jsx语法规则

1.定义虚拟dom时不要写引号

2.标签里混入js用{}

id={myId.toLowerCase()}

3.样式类名指令要用className而不是class

className="title"

4.内联样式要写style={ {key:value}}

style={ {color:'white',fontSize:'30px'}}

5.必须只有一个根标签 div包住

6.标签必须闭合

7.定义组件开头首字母大写

        .title{
            background-color: aqua;
            width: 200px;
        }
        
        <div id="test"></div>

        const myId = 'test';
        
        const myData = 'hello react';

        //1.创建虚拟dom
        const VDOM = (
            <div>
            <h2 className="title" id=**{myId.toLowerCase()}**>
            <span style={
  {color:'white',fontSize:'30px'}}>**{myData.toLowerCase()}**</span>    
            </h2>

            <h2 className="title" id=**{myId.toUpperCase()}**>
            <span style={
  {color:'white',fontSize:'30px'}}>**{myData.toUpperCase()}**</span>    
            </h2>

            <input type="text"/>

            <Good></Good>
        </div>

        )
        //2.渲染虚拟dom
        ReactDOM.render(VDOM,document.getElementById('test'))

JSX小练习传递数据

<script type="text/babel">
        //模拟数据
        const data = ['React', 'Vue', 'Angular'];

        //创建虚拟dom
        const VDOM = (
            <div>
                <h1>前端js框架</h1>
                <ul>
                    {
                        data.map((item,index) => {
                            return <li key={index}>{item}</li>
                        })
                    }

                    //简便写法
                    {data.map(item => <li>{item}</li>)}
                </ul>
                </div>
        )
        //将虚拟dom渲染到页面上
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

模块与组件模块化与组件化

React面向组件编程

函数式组件

        //创建函数组件
        function Demo(){
            return <h1>我是用函数定义的组件</h1>
            //**这里this指向undefined**
        }
        
        //渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
        
        **</Demo>是需要渲染的dom   id选择器test选中的div是容器**

复习类相关知识

<script>
        //创建一个person类
        class Person {
            //构造器方法
            constructor(name,age){
                //构造器中的this是   类的实例对象
                this.name = name;
                this.age = age;
            }
            //一般方法
            say(){
                console.log(`${this.name}说：我今年${this.age}岁`);
            }
        }

        //创建一个person的实例对象
        const p1 = new Person('tom',18);
        const p2 = new Person('jerry',20);

        console.log(p1);//Person {}
        console.log(p2);//Person {}
        p1.say();//tom说：我今年18岁
        p2.say();//jerry说：我今年20岁
    </script>

继承

类组件

//创建类式组件   继承react里面的组件
        class HelloMessage extends React.Component {
            render(){
                return (
                
                
                    <div>
                        <h1>Hello {this.props.name}</h1>
                    </div>
                    
                    
                )
            }
        }

注意事项

render是放在哪里的?MyComponent的原型对象上，供实例使用。


render中的this是谁?— MyComponent的实例对象。


执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么?
1.React解析组件标签,找到了MyComponent组件。

2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。

3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中.

简单组件 || 复杂组件

带不带state