react文档学习

核心概念目录

1、Hello World

2、JSX简介

jsx是一种js的扩展语法：

const element = <h1>Hello, world!</h1>;

3、元素渲染

元素是构成React应用的最小砖块，是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致,

(注意：React 元素是不可变对象。)

const element = <h1>Hello, world</h1>;

仅使用 React 构建的应用通常只有单一的根 DOM 节点。如果你在将 React 集成进一个已有应用，那么你可以在应用中包含任意多的独立根 DOM 节点。

想要将一个 React 元素渲染到根 DOM 节点中:

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

4、组件 & Props

函数组件与class组件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

react元素：可以是DOM标签或者自定义的组件：

const element = <div />;

const element = <Welcome name="Sara" />;

给子组件传参

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

注意： 组件名称必须以大写字母开头。

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

5、State & 生命周期

state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。

6、事件处理

7、条件渲染

8、列表 & Key

9、表单

10、状态提升

11、组合 vs 继承

12、React哲学