数据流方向

如果以前研究过 angular，应该知道双向数据绑定的概念。指令为 ng 模式。Angular 是双向数据流，父组件和子组件之间的通信相对方便。但有时，我们不希望儿子改变父亲的价值观。我们只能使用它，不能改变它。react 最明显的一点是，Vue 中的表单控件也有一个 V 型双向数据绑定指令。当父组件传递值时，可以直接传递列表。但是，它对于子组件是只读的。尝试修改后，将报告错误。当不考虑 Redux 和 flux 等状态管理框架时，上述方法通常用于父子组件通信。

与 jQuery 结合

首先，这两个可以一起使用。React 只关心挂载的根元素 root。其他元素不关心。做你喜欢做的事。换句话说，jQuery 不操作根中的元素事实上，这个问题没有实际意义，技术选择本身也有问题，一个主张控制 DOM，另一个不建议控制 DOM。

    <noscript>You need to enable JavaScript to run this app.</noscript>    <div id="root"></div>   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>   <script>alert($)</script>

也许你想试试。好的，试试看打开索引。公共文件夹下的 html，并将其删除而不添加注释。

PropTypes 类型检查

JS 是一种基于面向对象思想的语言，而不是真正的面向对象语言。它在类型检测方面并不完美，这是 typescript 起火的原因之一。当父组件将数据传输到子组件时，对要传输的属性值没有限制。自由度太高。这在工作中是完全不允许的。对于大型项目，缺乏必要的校准，后期维护极其困难。

import PropTypes from 'prop-types'

类外部使用：

xxx.propTypes={       p1:PropTypes.string.isRequired,       p2:PropTypes.func,       p3:PropTypes.number}

生命周期

生命周期就像从出生到死亡的过程。在 react 中，这些生命周期钩子函数非常有用，我们将在许多场合遇到它们。此外，值得注意的是，react 的每个组件都具有上述所有周期函数，而不仅仅是根组件或父组件。严格来说，生命周期函数将在从组件渲染到组件销毁的过程中的某个点自动执行，因此不必担心。但渲染是特殊的。react 的所有生命周期函数都有默认实现，但 render 除外。

import fetchJsonp from 'fetch-jsonp'fetchJsonp('/users.jsonp')  .then(function(response) {    return response.json()  }).then(function(json) {    console.log('parsed json', json)  }).catch(function(ex) {    console.log('parsing failed', ex)  })

换句话说，不能在组件中编写任何周期函数，也不能编写构造函数，但不能编写渲染。

  <noscript>You need to enable JavaScript to run this app.</noscript>    <div id="root"></div>   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>   <script>alert($)</script>

父->子组件传值

最基本的事情是传递属性的值。上述父->子值转移结束，todo_该项是自定义的，保证与子项接收的名称相同子组件需要以 this.props 的形式接收。xxx，这是这个道具。todo_项目子组件

<noscript>You need to enable JavaScript to run this app.</noscript>    <div id="root"></div>   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>   <script>alert($)</script>

在上面的示例中，当父组件传递值时，可以直接传递列表。但是，它对于子组件是只读的。尝试修改后，将报告错误。当不考虑 Redux 和 flux 等状态管理框架时，上述方法通常用于父子组件通信。

极致快 vs 高效率

前者需要压缩，而后者不需要前者删除注释，而后者不删除前者不需要热更新，而后者需要热更新测试工具：不需要前者，需要后者语法检查工具：不需要前者，需要后者

项目初始化

项目名称不必与我的相同。只要接通并启动它 NPM I-G 纱线（可选命令）此外，如果已在全球范围内安装了纱线，则可以从纱线开始安装过程可能有点慢，请稍候

类组件和函数组件的编写

在 react 中，一切都是一个组件。传统布局的头部、左侧导航、主要内容和尾部可以视为组件并独立维护。它就像积木。小部件最终形成小房子。React 组件分为两种类型，函数组件和类组件，这两种组件都使用。相反，此类组件更常见，但如果组件中不涉及业务逻辑，则更好地使用功能组件。下面是一个例子来说明两者之间的区别。

function Header(){  return <h1>我是头部</h1>;}

仔细观察后，会发现应用程序组件也是一个功能组件。此外，组件以大写字母定义和使用。事实上，在 react 中，区分组件和 HTML 标记的方法是 case。大写字母作为组件进行解析，小写字母作为 HTML 标记进行解析。顺便说一句，不管是单标签还是双标签。这取决于个人习惯。

function App() {  return (    <Header/>  );}

真正的关键字定义类从 ES6 开始，使用类。接下来，用类组件重写上述应用程序函数组件，以获得相同的效果，并输出 Hello world。

import React, {Component} from 'react'class App extends Component{    render(){        return (            <div>                hello world            </div>        )    }}export default App;

在 react 中，图片的介绍是特别的，分为本地图片介绍和网络图片参考网络图片引用与之前相同，IMG-tag-SRC 属性写入图片链接地址无法以这种方式导入本地映像。它需要以路径的形式导入，并具有 alt 属性