初学react笔记

  return <h1>Hello, {props.name}</h1>;
}

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

我们调用 ReactDOM.render() 函数，并传入 作为参数。React 调用 Welcome 组件，并将 {name: ‘Sara’} 作为 props 传入。Welcome 组件将

Hello, Sara

元素作为返回值。React DOM 将 DOM 高效地更新为

Hello, Sara

---

将函数组件转换成 class 组件(理想情况下，我们想要编写一次，然后可以更新UI）

需要在组件中插入state
1.创建一个同名的 ES6 class，并且继承于 React.Component。
2.添加一个空的 render() 方法。
3.将函数体移动到== render() ==方法之中。
4.在 render()方法中使用 ==this.props ==替换 props。
例如将下面的函数变为class组件

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

class组件

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

向 class 组件中添加局部的 state

1. render() 方法中的 this.props.date 替换成 this.state.date ：
2. 添加一个 class 构造函数，然后在该函数中为 this.state 赋初值：(this.state = {date: new Date()}😉
3. 通过以下方法将props传递到父类的构造函数中

constructor(props) {
   super(props);
   this.state = {date: new Date()};
 }

4. 除 元素中的 date 属性：
   完整代码

class Clock extends React.Component {
constructor(props) {
  super(props);
  this.state = {date: new Date()};
}

render() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
    </div>
  );
}
}

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

---

==react中特点：不能通过返回false阻止默认行为，必须使用preventDefault ==