react提交数据到数据库_作为数据科学家学习React，第二部分

react提交数据到数据库

This is part two of a series ‘Learning React as a Data Scientist’, where I document my attempt to learn React, as a data scientist. Part One is here.

这是“以数据科学家的身份学习React”系列文章的第二部分，其中记录了我以数据科学家的身份学习React的尝试。 第一部分在这里 。

My previous post on this subject was a relatively abstract overview of React. In that post, I said I’d look forward to reading it again weeks later to see what I had gotten right, as well as what misconceptions and biases had been lingering from my experience with Python and Jupyter notebooks.

我之前关于这个主题的文章是对React的一个相对抽象的概述。 在那篇文章中，我说我希望几周后再读一遍，看看我做对了什么，以及我在Python和Jupyter笔记本电脑的经历中仍然存在哪些误解和偏见。

Well, that’s what this post is about.

嗯，这就是这篇文章的主题。

Most React tutorials begin with an immediate disclaimer that JavaScript is a pretty big prerequisite for React, and that much of the difficulty for a pure beginner learning React will be related to mere Javascript syntax, as opposed to the logic of React itself.

大多数React教程都以免责声明开头，即JavaScript是React的相当大的先决条件，而纯粹的初学者学习React的许多困难将仅与Javascript语法有关，而不是React本身的逻辑。

I had some previous experience with Javascript before attempting to learn React, but I was heavily drawing on parallels and assumptions about related syntax from Python. I’ve spent a ton of time revisiting JavaScript, HTML, and CSS fundamentals and, while I do think it’s possible to pick up some valuable concepts about state management and the overarching benefits of ReactDOM.render() and the virtual DOM, I’m now convinced the tutorials are right, and that it’s essential to have a working knowledge of JavaScript syntax to really grasp what React is doing.

在尝试学习React之前，我曾经有过使用Javascript的经验，但是我大量使用了Python相关语法的相似之处和假设。 我花了很多时间重新研究JavaScript，HTML和CSS基础知识，尽管我确实认为有可能获得一些有关状态管理以及ReactDOM.render()和虚拟DOM的总体优势的有价值的概念，现在，我确信这些教程是正确的，并且必须具备JavaScript语法的实际知识，才能真正掌握React的工作。

What was surprising to me, though, was the ease and speed of picking up the essential quirks of JavaScript. Most of this ease and speed, I think, comes from recognizing similarities of abstraction between Python and JavaScript.

但是，令我惊讶的是，掌握JavaScript的这些基本要求的便捷性和速度。 我认为，这种轻松和快速的大部分来自于认识到Python和JavaScript之间抽象的相似之处。

So, for this post, I’ll point out the most useful parallels between the fundamentals of Python and JavaScript for the sake of learning React and UI development. It’s a helpful set of pointers which I think will help Python and JavaScript learners alike. Such a guide is oddly rare to find since the community of Python driven data-scientists doesn’t overlap much with the community of JavaScript driven web-development, and so there’s little pedagogical need for instruction based on parallels, even though learning via pattern recognition is one of the quickest ways to learn.

因此，在本文中，我将指出Python和JavaScript基础之间最有用的相似之处，以便学习React和UI开发。 这是一组有用的指针，我认为这将对Python和JavaScript学习者都有帮助。 很难找到这样的指南，因为Python驱动的数据科学家社区与JavaScript驱动的网络开发社区没有太多重叠，因此即使通过模式识别进行学习，也很少有基于并行的教学方法的教学需求。是最快的学习方法之一。

So, to start.

因此，开始。

变数 (Variables)

Variables are probably the most intuitive concept in any programming language. They are the basic placeholders of values, which are limited to certain primitive data types determined by the language, primitive meaning that the data type is not an object (which is a complex type of its own, which can include primitives or additional objects), and has no methods (which are functions attached).

在任何编程语言中，变量可能是最直观的概念。 它们是值的基本占位符，它们仅限于由语言确定的某些原始数据类型， 原始意味着数据类型不是对象(它本身是复杂的类型，可以包括基元或其他对象)，并且没有方法(已附加函数)。

For Python, there are four primitive, built-in data types:

对于Python ，有四种原始的内置数据类型：

1. Integer. Such as 4, or 12, or -8, or 0, but NOT 4.0 or 0.5 (see Float).
   整数。 例如4或12，或-8或0，但不是4.0或0.5(请参见Float)。
2. String. Such as ‘hello world’, or ‘4’, or ‘4.0’, or ‘’, anything with quotes.
   串。 例如“ hello world”，“ 4”，“ 4.0”或“''，任何带引号的内容。

3. Boolean. Either true or false.

   布尔值。 无论是真的还是假 的 。

4. Float. Such as 4.0, or 3.8172, or 0.01, but NOT 4 (see Integer).
   浮动。 例如4.0或3.8172或0.01，但不是4(请参阅整数)。

That’s it. Everything else in Python is a data structure containing other complexes or primitives. JavaScript is similar, with some unique differences.

而已。 Python中的其他所有内容都是包含其他复合体或基元的数据结构。 JavaScript相似，但有一些独特的区别。

For JavaScript, there are six primitive, built-in data types:

对于JavaScript ，有六种原始的内置数据类型：

1. undefined : no value attached, but different than ‘null’.
   未定义：未附加值，但与'null'不同。

2. Boolean : Either true or false.

2.布尔值： true或false 。

3. Number : Such as 4.0, or 12.8. Identical to a ‘Float’ in Python. **There is no primitive Integer type in Javascript!**

3.数字：例如4.0或12.8。 与Python中的“浮点数”相同。 ** Javascript中没有原始的Integer类型！**

4. String : Such as ‘hello world’, or ‘4’, or ‘4.0’, or ‘’. Identical to Python string.

4.字符串：例如“ hello world”，“ 4”或“ 4.0”或“''。 与Python字符串相同。

5. BigInt : Strange. Used to represent arbitrarily large integers.

5. BigInt： 奇怪 。 用于表示任意大整数。

6. Symbol. A unique and immutable value. It may look like a string or number, but it’s not. Under the hood, this has some important consequences.

6.符号。 独特而不变的价值。 它可能看起来像一个字符串或数字，但事实并非如此。 在引擎盖下，这有一些重要的后果 。

In both Python and JavaScript variables must be declared, and the syntax is slightly different for each.

在Python和JavaScript中，都必须声明变量，并且两者的语法略有不同。

Variable declaration in Python:

Python中的变量声明 ：

# a string variable:
some_string = 'hello world!# an int variable 
some_number = 5print(some_string, some_number) 
# this will print hello world 5 to output device

Variable declaration in JavaScript. Interestingly, in JavaScript, the variable type must be declared before assignment. There are two types of variable declaration in JavaScript: const and let. ‘Const’ stands for constant: the value of the variable cannot be reassigned. ‘Let’ means the variable can be reassigned.

JavaScript中的变量声明 。 有趣的是，在JavaScript中，必须在分配之前声明变量类型。 JavaScript中有两种类型的变量声明 ： const和let 。 'Const'代表常量：不能重新分配变量的值。 “ Let”表示可以重新分配变量。

// a string variable
const some_string = 'hello world, i cannot change';// a number variable 
let some_number = 5;console.log(some_string, some_number)
// this will print hello world, i cannot change 5 to output device
// any attempt to set some_string = {a new string} will result in 
// an error because of const, but some_number may be set as a new
// number, because of let

That about covers the basics of variables and declaration for both Python and JavaScript.

内容涵盖了Python和JavaScript的变量和声明的基础。

Python字典是JavaScript对象 (Python Dictionaries are JavaScript Objects)

This fact is, without a doubt, the most painfully confusing parallel of Python and JavaScript.

毫无疑问，这一事实是Python和JavaScript最令人困惑的难题。

Look at the following two code blocks:

查看以下两个代码块：

// JavaScript object const aJsObject = {
  firstJSkey: firstvalue,
  secondJSkey: second value
};

vs.

与

# Python Dictionarya_python_dict = {
  firstPkey: firstPvalue,
  secondPkey: secondPvalue
}

They are the same! Python dictionaries, just like JavaScript objects, are bracketed containers of key: value pairs. They work the same too, and they both use dot notation .suchAsThisKey to access keys in their respective dictionary/object to return a value for that key.

他们是一样的！ 就像JavaScript对象一样，Python字典被放在方括号内的键：值对容器。 它们的工作原理也相同，都使用点表示法.suchAsThisKey来访问各自字典/对象中的键，以返回该键的值。

Why is this so confusing? Because…

为什么这么混乱？ 因为…

Python对象是JavaScript类 (Python Objects are JavaScript Classes)

A Python object intrinsically is a class, but this naming convention is truly unfortunate for beginners of either language. A class is a formula for creating other objects or variables. It a one layer of abstraction up from variables. Python objects are highly useful for maintaining complex, readable code.

Python对象本质上是一个类，但是对于任何一种语言的初学者来说，这种命名约定确实是不幸的。 类是用于创建其他对象或变量的公式。 它是从变量开始的一层抽象。 Python对象对于维护复杂的可读代码非常有用。

# a python object (which is, in other words, a class)
class Animal:
  def __init__(self, name, type, food):
    self.name = name
    self.type = type
    self.food = foodjenny_the_giraffe = Animal('jenny', 'giraffe', 'acacia')jenny_the_giraffe.name
# this would return 'jenny', and likewise for the other properties

JavaScript classes are identical, but the confusion comes from the fact that JavaScript ‘objects’ are already the name for Python dictionaries. JavaScript classes work the same as Python objects, with slightly different syntax.

JavaScript类是相同的，但困惑来自于事实，即JavaScript“对象”已经是Python字典的名称。 JavaScript类的工作方式与Python对象相同，但语法略有不同。

// a javascript class
class Animal {
  constructor(name, type, food) {
    this.name = name;
    this.type = type;
    this.food = food;
  };
};const jenny_the_giraffe = new Animal('jenny', 'giraffe', 'acacia');jenny_the_giraffe.name;
// this would return 'jenny', and likewise for the other properties

The main syntax difference, which is important to understand (apart from the mere : -> {} going from Python to JavaScript for function and class declarations) is the __init__ vs. constructor methods. Both of them do the same thing, in that they allow for new instances of that class to be set up with initialized values. For Python, the __init__ method includes self as the explicit object being passed through __init__ method during initialization. In JavaScript, the constructor method has no ‘this’ or ‘self’ variable explicitly mentioned. Rather, the this variable implicitly accesses the object being called, so that the properties (such as name and food) only need to call this.name or this.food to assign those values, rather than explicitly passing through self in Python.

需要理解的主要语法差异(除了: -> {}从Python到JavaScript以实现函数和类声明)是__init__ vs. 构造方法。 他们两个都做同样的事情，因为它们允许使用初始化值设置该类的新实例 。 对于Python，__init__方法包括self作为在初始化期间通过__init__方法传递的显式对象。 在JavaScript中，构造方法没有明确提及“ this”或“ self”变量。 相反， this变量隐式访问被调用的对象，因此属性(例如name和food)仅需要调用this.name或this.food来分配这些值，而不是在Python中显式地传递self 。

One other important difference is that in Python, creating new class instance, such as jenny_the_giraffe, is as simple as jenny_the_giraffe = Animal('jenny', 'giraffe', 'acacia') . Whereas in JavaScript, the keywords new and const or let must be used, as with all variable declaration in JavaScript: const jenny_the_giraffe = new Animal('jenny', ‘giraffe', ‘acacia') . Failure to provide const or new will throw an error.

另一个重要的区别是，在Python中，创建新的类实例(例如jenny_the_giraffe就像jenny_the_giraffe = Animal('jenny', 'giraffe', 'acacia') 。 而在JavaScript中，必须使用关键字new和const or let ，就像JavaScript中的所有变量声明一样： const jenny_the_giraffe = new Animal('jenny', 'giraffe', 'acacia') 。 不提供const或new将引发错误。

功能声明 (Function Declaration)

One other important though simple difference between Python and JavaScript is the syntax of function declaration.

Python和JavaScript之间的另一个重要但简单的区别是函数声明的语法。

In Python, declaring a function is quite simple:

在Python中，声明函数非常简单：

def add_two(first, second):
    return first + secondadd_two(5,6)
# this will return 11 

That’s it! A def keyword and parentheses for the parameter values are sufficient for variable declaration in Python.

而已！ def关键字和参数值的括号足以在Python中声明变量。

JavaScript syntax is more…interesting. There are multiple ways to declare functions in JavaScript, with arrow functions being the convention as of 2015 with advent of ES6, the international body which determines the rules for scripting languages.

JavaScript语法更……有趣。 用JavaScript声明函数的方式有多种，箭头函数是2015年的惯例，而ES6则是确定脚本语言规则的国际机构，该惯例于2015年问世。

The old way, which is still important in certain situations, is as follows.

在某些情况下仍然很重要的旧方法如下。

const addFunction= function (one, two) {return one+two};addFunction(4,8);
// this will return 12

Arrow function syntax:

箭头函数语法：

const addFunction = (one, two) => one + two;addFunction(2,3)
// this will return 5

Interestingly, arrow function syntax allows values to automatically be passed into a code block assumed to be a function, without brackets, and without a return statement (if the code is on one line). If the passed values take only one parameter, parentheses aren’t even needed. It’s somewhat strange, but pretty convenient, and React uses arrow functions a lot.

有趣的是，箭头函数语法允许将值自动传递到假定为函数的代码块中，不带括号，也没有返回语句(如果代码在一行上)。 如果传递的值仅采用一个参数，则甚至不需要括号。 这有点奇怪，但是非常方便，而且React经常使用箭头功能。

Import and Export

进出口

One final difference between Python and JavaScript is how differently they handle namespace in a file directory. Python automatically makes function and variable names available to other files in a directory, if they’re coming from a file ending in ‘.py’.

Python和JavaScript之间的最后一个区别是它们处理文件目录中的名称空间的方式不同。 如果目录中的其他文件来自以'.py'结尾的文件，Python会自动使函数和变量名可用于目录中的其他文件。

However, JavaScript explicitly requires those functions or variables to be exported at the bottom of the file in order to be accessed. Let’s pretend we have a myMathFunctions.py file with our add_two function from above.

但是，JavaScript明确要求将那些函数或变量导出到文件底部才能访问。 让我们假设我们有一个myMathFunctions.py文件，上面有我们的add_two函数。

from myMathFunctions import add_two

That’s all that’s necessary in Python to import this function from a different file! Whereas in JavaScript, we have to explicitly export functions in order for them to be available in the global namespace, even when using import.

这是Python中从另一个文件导入此功能所必需的一切！ 而在JavaScript中，我们必须显式导出函数，以便即使在使用import时，它们也可以在全局名称空间中使用。

最后的想法 (Final Thoughts)

Most of this post was based on syntax, but syntax can be the biggest stumbling block in learning something as complex as React. I particularly think arrow functions and class declarations in JavaScript are crucial to understand above all else. The differences around variable declaration aren’t too bad, but understanding this in regard to functions and classes is crucial because of how often React components rely on this to pass props and manage state through this.props , which I focused on in my last post. I’ll continue learning React, and eventually write another post with further thoughts on the important differences between Python and JavaScript, particularly in the context of React. Thanks for reading!

这篇文章大部分是基于语法的，但是语法可能是学习像React这样复杂的东西时最大的绊脚石。 我特别认为JavaScript中的箭头函数和类声明对于理解所有其他内容至关重要。 变量声明方面的差异还不错，但是就函数和类而言，了解this一点至关重要，因为React组件多久依靠this来传递this.props和通过this.props管理状态，这是我在上this.props文章中重点介绍的。 我将继续学习React，并最终写另一篇文章，对Python和JavaScript之间的重要区别，尤其是在React的背景下，有进一步的思考。 谢谢阅读！

翻译自: https://medium.com/swlh/learning-react-as-a-data-scientist-part-two-b54e57618d3b

react提交数据到数据库