React实战之数据流方向与项目初始化

,如果以前研究过angular，应该知道双向数据绑定的概念。 指令为ng模式。Angular是双向数据流，父组件和子组件之间的通信相对方便。 但有时，我们不希望儿子改变父亲的价值观。我们只能使用它，不能改变它。 react最明显的一点是，Vue中的表单控件也有一个V型双向数据绑定指令。 当父组件传递值时，可以直接传递列表。 但是，它对于子组件是只读的。尝试修改后，将报告错误。 当不考虑Redux和flux等状态管理框架时，上述方法通常用于父子组件通信。,首先，这两个可以一起使用。 React只关心挂载的根元素root。 其他元素不关心。做你喜欢做的事。换句话说，jQuery不操作根中的元素 事实上，这个问题没有实际意义，技术选择本身也有问题，一个主张控制DOM，另一个不建议控制DOM。,也许你想试试。好的，试试看打开索引。公共文件夹下的html，并将其删除而不添加注释。,JS是一种基于面向对象思想的语言，而不是真正的面向对象语言。它 在类型检测方面并不完美，这是typescript起火的原因之一。 当父组件将数据传输到子组件时，对要传输的属性值没有限制。 自由度太高。这在工作中是完全不允许的。对于大型项目，缺乏必要的校准，后期维护极其困难。,类外部使用：,生命周期就像从出生到死亡的过程。在react中，这些生命周期钩子函数非常有用，我们将在许多场合遇到它们。 此外，值得注意的是，react的每个组件都具有上述所有周期函数，而不仅仅是根组件或父组件。严格来说，生命周期函数将在从组件渲染到组件销毁的过程中的某个点自动执行，因此不必担心。 但渲染是特殊的。react的所有生命周期函数都有默认实现，但render除外。,换句话说，不能在组件中编写任何周期函数，也不能编写构造函数，但不能编写渲染。,最基本的事情是传递属性的值。 上述父->子值转移结束，todo_该项是自定义的，保证与子项接收的名称相同 子组件需要以this.props的形式接收。xxx，这是这个道具。todo_项目 子组件,在上面的示例中，当父组件传递值时，可以直接传递列表。但是，它对于子组件是只读的。尝试修改后，将报告错误。当不考虑Redux和flux等状态管理框架时，上述方法通常用于父子组件通信。,前者需要压缩，而后者不需要 前者删除注释，而后者不删除 前者不需要热更新，而后者需要热更新 测试工具：不需要前者，需要后者 语法检查工具：不需要前者，需要后者
,项目名称不必与我的相同。只要接通并启动它 NPM I-G纱线（可选命令） 此外，如果已在全球范围内安装了纱线，则可以从纱线开始 安装过程可能有点慢，请稍候
,在react中，一切都是一个组件。传统布局的头部、左侧导航、主要内容和尾部可以视为组件并独立维护。它就像积木。小部件最终形成小房子。React组件分为两种类型，函数组件和类组件，这两种组件都使用。相反，此类组件更常见，但如果组件中不涉及业务逻辑，则更好地使用功能组件。下面是一个例子来说明两者之间的区别。,仔细观察后，会发现应用程序组件也是一个功能组件。 此外，组件以大写字母定义和使用。 事实上，在react中，区分组件和HTML标记的方法是case。 大写字母作为组件进行解析，小写字母作为HTML标记进行解析。顺便说一句，不管是单标签还是双标签。这取决于个人习惯。,真正的关键字定义类从ES6开始，使用类。接下来，用类组件重写上述应用程序函数组件，以获得相同的效果，并输出Hello world。,在react中，图片的介绍是特别的，分为本地图片介绍和网络图片参考 网络图片引用与之前相同，IMG-tag-SRC属性写入图片链接地址 无法以这种方式导入本地映像。 它需要以路径的形式导入，并具有alt属性,

数据流方向

如果以前研究过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 我是头部;
}

仔细观察后，会发现应用程序组件也是一个功能组件。 此外，组件以大写字母定义和使用。 事实上，在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属性