element vs component

[hello2dj]

什么 jsx

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code:

react element vs component

element

Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of a DOM node.’

react element 简单说就是描述了你在屏幕上所看到的，复杂点说就是一个 DOM node 的 js object 表现代理

In order to create our object representation of a DOM node (aka React element), we can use React’s createElement method.

为了创建一个 DOM node 的 js object 表现代理，我们需要使用 react 的 createElement 方法

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

而我们所看到的所有如图片里的写法都是 jsx, 当他们被 babel 转义后就是这个

React.createElement(Icon, null)

So finally, what do we call it when we write out our component like this, ? We can call it “creating an element” because after the JSX is transpiled, that’s exactly what’s happening. 也就是我们在 jsx 文件里的所有的类似的写法都是在写 createElement()方法（jsx 会被 babel 转义）

如下

function Button ({ addFriend }) {
  return (
    <button onClick={addFriend}>Add Friend</button>
  )
}

function User ({ name, addFriend }) {
  return (
    <div>
      <p>{name}</p>
      <Button addFriend={addFriend}/>
    </div>
  )
}

会被转为

function Button ({ addFriend }) {
  return React.createElement(
    "button",
    { onClick: addFriend },
    "Add Friend"
  )
}

function User({ name, addFriend }) {
  return React.createElement(
    "div",
    null,
    React.createElement(
      "p",
      null,
      name
    ),
    React.createElement(Button, { addFriend })
  )
}

component

“Components are the building blocks of React”. Notice, however, that we started this post with elements. The reason for this is because once you understand elements, understanding components is a smooth transition. A component is a function or a Class which optionally accepts input and returns a React element.

理解了上面的 react element 就知道 component 了，对上段英文翻译一下就是， component 是构建 react 应用的基础，理解了 element 就知道了，component 就是一个类或者是一个函数，他接收输入 并且返回一个 element 以供 react 使用

1. createElement(type, props, [...children]) type 是 tagName string, 或者 component(class, function) 又或者是 fragment

createElement -> 解析props, 生成key或者ref, ->生成vnode

http://blog.csdn.net/liangklfang/article/details/72782920

getSnapshotBeforeUpdate（https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-b=】、【

这个生命周期函数是在 render 之后 DOM 更新之前调用的

若是想要获取 DOM 更新之前的 DOM 数据可以在这个函数里获取

react 关于 props 和 state 的函数或属性

static defaultProps = {} // 默认属性
getDefaultProps , 函数的形式获取默认属性
getInitialState , 函数的形式获取初始state

ts中的keyof 是展示一个对象中的 key

keyof {a: 3} // a

type Partial<T> = {
    [P in keyof T]?: T[P];  // P是T中的key, 且加了？ 就是可选的意思
};

type Required<T> = {
    [P in keyof T]-?: T[P]; // -? 就是去掉 ？ 去掉可选性， 也可以使+？添加可选属性
};

type Readonly<T> = {
    readonly [P in keyof T]: T[P]; // 全部加上readonly属性
};