react入门

创建项目

yarn create react-app morney --template typescript

元素

元素的创建

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

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

元素的渲染：

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

组件

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
组件的定义：

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

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

注意：组件不管是什么方式创建，组件的名称首字母得大写

props

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

state

作用：用来给组件提供组件内部使用的数据，state允许React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。
注意：
1.只有通过class创建的组件才具有状态
2.状态是私有的，完全由组件来控制
3.不要在 state 中添加 render() 方法中不需要的数据，会影响渲染性能！
4.可以将组件内部使用但是不渲染在视图中的内容，直接添加给 this
不要直接修改 State,下面代码不会渲染，而是应该使用 setState()，构造函数是唯一可以给 this.state 赋值的地方：

this.state.comment = ‘Hello’;

State 的更新可能是异步的
state 为局部的或是封装的。除了拥有并设置了它的组件，其他组件都无法访问