React 组件 &Props

组件可以将UI切分成一些独立的、可复用的部件。组件可以接收任意的输入值，并返回一个需要在页面上展示的React元素。

函数定义、类定义组件

定义一个组件最简单的方式是使用JavaScript函数：

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

该函数是一个有效的React组件, 因为它接收唯一带有数据的"props"对象并返回一个React元素.

我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。

你也可以使用ES6 class来定义一个组件：

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

继承React.Component后，必须要实现的方法是render()，而其它的一些方法都是可选的。

 

1.组件生命周期

Mounting

当一个组件被创建，插入到DOM时，会调用这些方法

（1）constructor()

（2）static getDerivedStateFromProps()

（3）render()

（4）componentDidMount()

Updating

当一个组件的props或state变化时，组件会被重新渲染，下面的方法会被调用

（1）static getDerivedStateFromProps()

（2）shouldComponentUpdate()

（3）render()

（4）getSnapshotBeforeUpdate()

（5）componentDidUpdate()

Unmouting

当一个组件从DOM中删除时调用

（1）componentWillUnmount

Error Handing

（1）componentDidCatch()

2.其它API

（1）setState()

（2）forceUpdate()

3. class properties

（1）defaultProps

（2）displayName

4. instance properties

（1）props

（2）state

组件生命周期常用方法

1.render()

当被调用时，应该检查this.props和this.state，并返回下面的类型之一：

（1）React element

通过是通过JSX语法，如<div />

（2）Arrays and fragments

允许返回多个可以渲染的元素。

（3）portals

允许把children渲染到不同的dom子树中

（4）string and numbers

作为text nodes 渲染。

（5）boolean or null

不进行渲染（多数是这样用的return test&&<Child />）

当shouldComponentUpdate返回false时，render不会被执行。

2.constructor()

当你不初始化state，不绑定方法时，你不需要实现组件的构造方法。

它在被加载前（mounted）被调用，第一句话应该是调用super(props)，否则this.props是未定义的。

3.componentDiMount()

当组件加载后（mounted）立即调用这个方法，如果你需要从远端加载数据，这是一个好的地方。

4.componentDidUpdate()

5componentWillUnmount()

 

组件渲染

React元素也可以是用户自定义的组件，当React遇到元素是用户自定的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为props.

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

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


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

我们来回顾一下在这个例子中发生了什么：

（1）我们对<Welcom name="Sara" />元素调用ReactDOM.render()方法。

（2）React将{name:'Sara'}作为props传入并调用Welcom组件。

（3）Welcom组件将<h1>Hello, Sara</h1>元素作为结果返回。

（4）React DOM将DOM更新为<h1>Hello, Sara </h1>

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

组合组件

组件可以在它输出中引用其它组件，这就可以让我们用同一组件来抽象出任意层次的细节。

组件的返回值只能有一个根元素。

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

 

无论是使用函数还是类来声明一个组件，它决不能修改它自己的props。

 

最后欢迎大家访问我的个人网站：1024s​​​​​​​