新增了哪些概念

元素和组件

一个元素是一个简单的对象。

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

React.createElement() 函数会返回一个对象。

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

最后使用 ReactDOM.render() 方法渲染到 DOM。

<div id='login-btn'>Login</div>

一个组件由若干个元素构建的，但组件可以拥有状态（state）、生命周期方法（componentDidMount、componentDidUpdate）和外部属性（props）。

const Button = ({ onLogin }) => {
  return (
    <div id='login-btn' onClick={onLogin}>Login</div>
  );
}

状态和外部属性

状态（state）：组件内部的数据，它是私有的，只能被所属的组件访问和控制。

外部属性（props）：从父组件传递给子组件的数据，可以包含单个值或对象。子组件不能直接修改这些数据。

state 类似于在函数内声明的变量，而 props 类似于函数参数。

key

key 是一个特殊的属性，为每个列表项添加唯一的 key 值是很重要的，有助于 React 正确地跟踪每个项的变化、添加和删除。

在渲染列表时，使用索引 index 作为 key 值可能会导致问题，特别是在列表顺序发生改变时，React 可能会出现不正确的渲染结果。

为了正确使用 key 属性，最好选择一个稳定且唯一的标识符作为 key，通常是从数据源中获取的唯一标识符。

数组中使用的 key 在其同级中应该是唯一的，但它们不需要是全局唯一的。

ref

ref 用于获取 DOM 元素或组件实例的引用，以便直接访问它们。

类组件创建 ref 对象

class MyApp extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  render() {
    return <div ref={this.myRef} />
  }
}

函数组件创建 ref 对象

function MyApp() {
  const myRef = useRef(null);

  return <div ref={myRef} />;
}

函数或类组件不会接收到 ref 参数，并且 ref 在 props 中不可用。

children

一个特殊的属性，允许将组件作为数据传递给其他组件。

<MyApp>
  <ChildA />
  <ChildB />
</MyApp>

class MyApp extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

React 为处理 children 提供了一些方法

React.Children.map
React.Children.forEach
React.Children.count
React.Children.only
React.Children.toArray

render

render 方法可能返回的类型

React elements：包括 HTML 元素和用户自定义元素
Arrays and fragments
Portals：将子元素渲染到不同的 DOM 子树中
String and numbers：字符串和数字都作为文本节点进行呈现
Booleans or null：不会渲染任何内容，但这些类型用于有条件地渲染内容

新增了哪些概念

元素和组件​

状态和外部属性​

key​

ref​

children​

render​

元素和组件

状态和外部属性

key

ref

children

render