react组件（用过react就别看了，都是很简单的知识点）

2020-02-02 410 阅读1分钟

1.定义react组件的方法有：

方法定义：

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

es6的class定义

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

2.组件可以像dom元素一样使用，他可以将jsx属性作为单一的对象传递给组件，我们称做"props"

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

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

在react中小写字母开头表示的是dom元素，如果是大写字母开头表示的是组件，如同上面的Welcome

3.组件可以在使用的时候引用其他的组件

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')
);

改成es6中class的写法

class Clock extends React.Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <h1>hello  world</h1>
        <div>{this.props.name}</div>
      </div>
    )
  }
}

ReactDOM.render(
  <Clock name="clock"/>,
  document.getElementById("root")
)

4.提取组件

尽量把组件拆分成更小的组件，组件最好根据组件的作用来命名

5.Props是只读的

通过state来响应用户的操作来改变