master

分支 (1)

管理

管理

master

study-react
/
学习笔记.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>学习笔记</title>
    </head>
    <body>
        <div>
            <h1>学习React</h1>
            <br/>
            <h1>JSX</h1>
            <H3>JSX解决创建虚拟DOM繁琐，使工作人员更简便。</H3>
            <H3>JSX是原始js创建虚拟DOM的语法糖。</H3>
            <br/>
            <br/>
            <br/>
            <h1>js语句和js表达式</h1>
            <h3>1、表达式：一个表达式会产生一个值，可以放在任何一个需要的地方</h3>
            <h4>下面这些都是表达式：</h4>
            <h4>(1).a</h4>
            <h4>(2).a+b</h4>
            <h4>(3).demo(1)</h4>
            <h4>(4).arr.map()</h4>
            <h4>(5).function test(){}</h4>
            <h3>2、语句（代码）</h3>
            <h4>下面这些都是语句（代码）：</h4>
            <h4>(1).if（）</h4>
            <h4>(2).for（）</h4>
            <h4>(3).switch（）{case:xxxxx}</h4>
            <br/>
            <br/>
            <br/>
            <h1>模块与组件、模块化与组件化的理解</h1>
            <h3>模块</h3>
            <h4>1、理解：向外提供特定功能js程序，一半就是一个js文件</h4>
            <h4>2、为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。</h4>
            <h4>3、作用：复用编码，简化项目编码，提高运行效率</h4>
            <h3>组件</h3>
            <h4>1、理解：用来实现局部功能效果的代码和资源的集合（html/css/js/img/video/font...）</h4>
            <h4>2、为什么:一个界面的功能更复杂。</h4>
            <h4>3、作用：复用编码，简化项目编码，提高运行效率</h4>
            <h3>模块化</h3>
            <h4>当应用的js都以js模块来编写，这个应用就是一个模块化的应用</h4>
            <h3>组件化</h3>
            <h4>当应用是以多个组件的方式实现，这个应用就是一个组件化的应用</h4>
            <br/>
            <br/>
            <br/>
            <h1>组件三大核心属性state</h1>
            <h3>1、理解</h3>
            <h4>(1)state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)</h4>
            <h4>(2)组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）</h4>
            <br/>
            <h3>2、强烈注意</h3>
            <h4>(1)组件中render方法中的this为组件实列对象</h4>
            <h4>(2)组件定义的方法中this为undefind，如何解决？</h4>
            <h5>1)强制绑定this：通过函数对象的bind（）</h5>
            <h5>2)箭头函数</h5>
            <h4>(3)状态数据，不能直接修改或更新。</h4>
            <br/>
            <br/>
            <h1>组件三大核心属性props</h1>
            <h3>1、理解</h3>
            <h4>(1)每个组件对象都有props（properties的简写）属性</h4>
            <h4>(2)组件标签的所有属性都保存在props中</h4>
            <br/>
            <h3>2、作用</h3>
            <h4>(1)通过标签属性从组件外向组件内传递变化的数据。</h4>
            <h4>(2)注意：组件内部不要修改props数据</h4>
            <br/>
            <br>
            <h1>受控组件和非受控组件</h1>
            <h3>受控组件：</h3>
            <h4>随着输入维护状态就是受控组件</h4>
            <h3>非受控组件：</h3>
            <h4>现取现用</h4>
            <br/>
            <br>
        </div>
    </body>
</html>