vue开发者react学习笔记（二）

import React from 'react';export default class Word extends React.Component{state={data:1}constructor(){super();console.log(1)}componentDidMount(){this.setState({data:2})}handleTest(){console.log(1)}render(){return(<div onClick={this.handleTest}>this is word {this.state.data}</div>)}}

1实践开发组件，新建一个组件Word,定义组件构造函数，state，声明点击事件方法handleTest,

然后在声明周期componentDidMount 更新state数据

2 在父组件引入子组件并使用

import logo from './logo.svg';import './App.css';import Word from './components/Word.jsx'function App() {  return (    <div className="App">      <header className="App-header">        <img src={logo} className="App-logo" alt="logo" />        <p>          Edit <code>src/App.js</code> and save to reload.        </p>        <Word></Word>        <a          className="App-link"          href="https://reactjs.org"          target="_blank"          rel="noopener noreferrer"        >          Learn React        </a>      </header>    </div>  );}export default App;