react学习(一)

2018-06-24 02:16:22来源：未知阅读 ()

组件和属性（props）

函数式组件：

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

渲染一个组件：

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

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

注意：组件名总是大写字母开始，比如 Welcome。

组件名字可以直接用作html标签，比如<Welcome />

ReactDom.render()

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')
); //第一个是App组件，返回的是html标签。第二个是react根节点。

注意：
组件必须返回一个单独的根元素。这就是为什么我们添加一个 <div> 来包含所有 <Welcome /> 元素的原因。

第二个render例子：

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

状态(state)和生命周期

上面介绍的组件，是函数式组件，而这种组件有限制，无法使用state，因此，第二种组件——类组件，则变得额外重要。

函数式组件转化为类组件：

创建一个继承自 React.Component 类的 ES6 class 同名类。
添加一个名为 render() 的空方法。
把原函数中的所有内容移至 render() 中。
在 render() 方法中使用 this.props 替代 props。
删除保留的空函数声明。

class Clock extends React.Component {  //Clock 大写开头，也就是函数式组件的名字
  render() {    //多了一个render()空方法
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

注意：现在这个Clock就是类组件了，而不是函数式组件，此时才可以使用状态（state）。

class Clock extends React.Component {
  constructor(props) {
    super(props);  //将props传递给constructor构造函数，
    this.state = {date: new Date()}; // 使用constructor函数初始化this.state
  }   // 类组件应始终使用 props 调用基础构造函数。

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

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

生命周期钩子：

class Clock extends React.Component {  //Clock 类组件
  constructor(props) {  //基础构造函数，用来初始化this.state
    super(props);     //传入props
    this.state = {date: new Date()};  //初始化
  }

  componentDidMount() {   // 挂载
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {  //卸载
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({     //更新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 事件使用驼峰命名，而不是全部小写。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 这个绑定是必要的，使`this`在回调中起作用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>    //onClick 使用驼峰命名法
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

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