dz道具中心怎么添加新道具_但是你通过了道具

dz道具中心怎么添加新道具

用言语讨论您今天或本周在课堂上学到的东西。(Discuss in words something you learned in class today or this week.)

Global vs. Local State: The state is the current data that our app stores to control its behavior. ex. a checkbox stores data (boolean) if it’s on or off. Global means our state is accessible by every element/component of the app. But the important fact is that it pollutes the whole app since it echoes in every component that accesses it. Local state is not the state we define locally. It has the goal to encapsulate the data flow within the component.

全球状态与本地状态：状态是我们的应用存储以控制其行为的当前数据。 例如如果数据处于打开或关闭状态，则复选框将存储数据(布尔值)。 Globa l表示应用的每个元素/组件都可以访问我们的状态。 但是重要的事实是，由于它回荡了访问它的每个组件，因此它污染了整个应用程序。 本地状态不是我们在本地定义的状态。 其目的是将数据流封装在组件内。

状态和道具有什么区别？ (What is the difference between state and props?)

In a React component, props are variables passed to it by its parent component. State on the other hand is still variables, but directly initialized and managed by the component. The state can be initialized by props.

在React组件中， props是其父组件传递给它的变量。 另一方面，国家仍然是变量，而是直接初始化和组件管理。 状态可以通过props初始化。

The difference is all about which component owns the data. State is owned locally and updated by the component itself. Props are owned by a parent component and are read-only. Props can only be updated if a callback function is passed to the child to trigger an upstream change.

区别仅在于哪个组件拥有数据。 State由本地拥有，并由组件本身更新。 道具由父组件拥有，并且是只读的。 仅当将回调函数传递给子级以触发上游更改时，才能更新道具。

什么是ReactDOM ？ ReactDOM和React什么区别？ (What is ReactDOM? What is the difference between ReactDOM and React?)

The ReactDOM module exposes DOM-specific methods, while React has the core tools intended to be shared by React on different platforms (e.g. React Native). To be more concise, react is for the components and react-dom is for rendering the components in the DOM. ‘react-dom’ acts as a glue between components and DOM.

ReactDOM模块公开了特定于DOM的方法，而React具有旨在由React在不同平台(例如React Native)上共享的核心工具。 为了更简洁，React是为组件和React-DOM是用于DOM渲染分量。 “ react-dom ”充当组件和DOM之间的粘合剂。

什么是React.createClass ？ (What is React.createClass?)

Because JavaScript didn’t have classes, React included its own class system. React.createClass allows you to generate component "classes." Under the hood, your component class is using a bespoke class system implemented by React.

因为JavaScript没有类，所以React包含了自己的类系统。 React.createClass允许您生成组件“类”。 在幕后，您的组件类使用的是由React实现的定制类系统。

With ES6, React allows you to implement component classes that use ES6 JavaScript classes. The end result is the same — you have a component class. But the style is different. And one is using a “custom” JavaScript class system (createClass) while the other is using a "native" JavaScript class system.

使用ES6，React允许您实现使用ES6 JavaScript类的组件类。 最终结果是相同的-您有一个组件类。 但是风格不同。 一种使用“自定义” JavaScript类系统( createClass )，另一种使用“本地” JavaScript类系统。

React.createClass component declaration:

React.createClass组件声明：

const MyComponent = React.createClass({
  render() {
    return <p>I am a component!</p>;
  }
});

And the ES6 class component declaration:

和ES6类的组件声明：

class MyComponent extends React.Component {
  render() {
    return <p>I am a component, too!</p>;
  }
}

您可以使用哪种(如果有)节点库方法来解决您今晚在课堂上解决的算法问题？ (Which (if there is) node library method could you use to solve the algorithm problem you solved in class tonight?)

In the group project we installed and used axios to make our fetch calls in our app!

在小组项目中，我们安装并使用axios在我们的应用程序中进行提取调用！

npm i @material-ui/core

npm我@ material-ui / core

用JavaScript解释事件委托以及它为什么有用。 (Explain event delegation in JavaScript and why it is useful.)

Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements.

通过事件委托，您可以避免将事件侦听器添加到特定节点。 而是将事件侦听器添加到一个父对象。 该事件侦听器分析冒泡事件以找到子元素的匹配项。

The whole idea behind event delegation is that instead of listening for a change on the inputs directly, we should look for an HTML element that is going to be on the page when the page initially loads.

事件委托背后的全部思想是，与其直接侦听输入内容的变化，不如寻找最初加载页面时将在页面上出现HTML元素。

您最兴奋的是哪种JavaScript /浏览器新功能，为什么？ (Which new JavaScript / browser features are you most excited about and why?)

空位合并 (Nullish Coalescing)

I first came across this in JS 311 while working with Ariel on the beer API Hackathon. We needed a way to insert a “default” image for those beers which did not come with one….so along came nullish coalescing to the rescue!

在与Ariel一起研究啤酒API Hackathon时，我首先在JS 311中遇到了这个问题。 我们需要一种为未附带啤酒的啤酒插入“默认”图像的方法。因此随之而来的是空虚的联合救援！

Nullish coalescing adds the ability to truly check nullish values instead of falsey values. What is the difference between nullish and falsey values, you might ask?

空值合并增加了真正检查nullish值而不是falsey值的能力。 是什么区别nullish和falsey值，你可能会问？

In JavaScript, a lot of values are falsey, like empty strings, the number 0, undefined, null, false, NaN, and so on.

在JavaScript中，很多值都是falsey ，例如空字符串，数字0， undefined ， null ， false ， NaN等等。

However, a lot of times you might want to check if a variable is nullish — that is if it is either undefined or null, like when it's okay for a variable to have an empty string, or even a false value.

但是，很多时候您可能想检查一个变量是否为空-即它是undefined还是为null ，例如当一个变量可以有一个空字符串甚至是一个假值时就可以了。

In that case, you’ll use the new nullish coalescing operator, ??

在这种情况下，您将使用新的空合并运算符??

You can clearly see how the OR operator always returns a truthy value, whereas the nullish operator returns a non-nulllish value.

您可以清楚地看到OR运算符如何始终返回真实值，而null运算符如何返回非null值。

Austin Coding Academy

奥斯丁编码学院

翻译自: https://medium.com/@destinysetzer/but-did-you-pass-the-props-c358b88cdac1

dz道具中心怎么添加新道具