响应式系统与React|青训营笔记

用户3911297210902
111 阅读3分钟

响应式系统与React|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第9天

React简介

react是什么？

React是流行的javascript框架之一，是一个声明性的、基于组件的、用于构建用户界面的高效javascript库。

react设计思路

UI编程的痛点

  • 状态更新，UI不会自动更新，需要手动地调用DOM进行更新.
  • 欠缺基本的代码层面的封装和隔离，代码层面没有组件化.
  • UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“回调地狱”。

react的设计与实现——响应式编程

  • 状态更新，UI自动更新.
    • “状态更新，UI不会自动更新，需要手动地调用DOM进行更新”
  • 前端代码组件化，可复用，可封装.
    • “欠缺基本的代码层面的封装和隔离，代码层面没有组件化”
  • 状态之间的互相依赖关系，只需声明即可.
    • “UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到”回调地狱“”

react的设计思路：组件化

  • 组件设计
  1. 组件声明了状态和UI的映射.
  2. 组件有道具状态两种状态。
  3. “组件”可由其他组件拼装而成。

JSX基础语法

什么是JSX？

  • JSX是javascript的语法扩展。React建议在组件使用JSX。在JSX中，我们结合了javascript和HTML，并生成了可以在DOM中呈现的react元素。

JSX基础使用

  1. 定义虚拟DOM，不能使用“”（双引号）

  2. 标签中混入JS表达式的时候使用{}

  3. 样式的类名指定不要使用class，使用className

  4. 不能有多个根标签，只能有一个跟标签

  5. 标签必须闭合

  6. 关于JS表达式和JS语句：

  • JS表达式：返回一个值，可以放在任何一个需要值的地方 a ，a+b， demo(a)， function text(){}
  • JS语句：if(){}， for(){} ，while(){} ，swith(){} ，不会返回一个值
  • 例子
<script src="../js/react.development.js" type="text/javascript"></script>
<script src="../js/react-dom.development.js" type="text/javascript"></script>

<script src="../js/babel.min.js"></script>
<!--这里使用了js来创建虚拟DOM-->
<script type="text/babel">
        const MyId = "title";
        const MyData = "Cyk";
        // 1.创建虚拟DOM
        const VDOM = (
            <h1 id = {MyId.toLocaleUpperCase()}>
                <span className = "sss" style = {{fontSize:'50px'}}>sss</span>
            </h1>
        )
        // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
        ReactDOM.render(VDOM,document.getElementById("test"));
</script>

组件

  • React 中一切都是组件。我们将每个单独的部分称为组件。 通常，组件是一个javascript函数，它接受输入，处理它并返回在UI中呈现的React元素。

  • 注意：  组件名称必须以大写字母开头。

    React 会将以小写字母开头的组件视为原生 DOM 标签。例如，< div />代表 HTML 的 div 标签，而< Weclome /> 则代表一个组件，并且需在作用域内使用 Welcome

函数式组件

//1.先创建函数，函数可以有参数，也可以没有，但是必须要有返回值 返回一个虚拟DOM
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
//2.进行渲染
ReactDOM.Render(<Welcom name = "ss" />,document.getElementById("div"));

类组件

//必须继承React.Component
//然后重写Render()方法，该方法一定要有返回值，返回一个虚拟DOM
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
//渲染 【这个跟之前也是一样的】
ReactDOM.Render(<Welcom name = "ss" />,document.getElementById("div"));

组件的属性

state

  • state表示：状态。state是组件的私有属性。

  • 在React中，用户的界面会随着状态的改变而改变。

  • state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）

  • 注意点：

    1. 组件的构造函数，必须要传递一个props参数

    2. this：类中所有的方法局部都开启了严格模式，如果直接进行调用，this就是undefined

    3. 改变state,使用setState进行修改，如果只是修改state的部分属性，则不会影响其他的属性，这个只是合并并不是覆盖。

    4. this.setState()，该方法接收两种参数：对象或函数。

  • 对象：即想要修改的state值
  • 函数：接收两个函数，第一个函数接受两个参数，第一个是当前state，第二个是当前props，该函数返回一个对象，和直接传递对象参数是一样的，就是要修改的state；第二个函数参数是state改变后触发的回调

Props

  • Props 是只读属性，传递给组件以呈现UI和状态，我们可以随时间更改组件的输出。
avatar
文章
阅读
粉丝