标签:key 生成 document 大写 tom ret 标签 sele imp
1 //react语法塘 2 import React from ‘react‘; 3 //reactDom用来操作虚拟DOM 4 import ReactDom from ‘react-dom‘; 5 //导入组件 6 import App from ‘./App‘; 7 ReactDom.render( 8 /*使用时需将组件App设置为 标签格式 */ 9 <App/>, 10 document.querySelector(‘#root‘), 11 ()=>{ 12 console.log(‘渲染完成‘); 13 } 14 )
1 //只需调入react语法塘【结构化赋值】 2 import React,{Component,Fragment} from ‘react‘; 3 4 5 // React.Component : 所有组件的父类【在react当中所有的组件创建的时候必须首字母大写,为了区分Element元素和组件的区别】 6 class App extents Component{ 7 // constructor 初始化函数 可以用来存放当前组件所需要的一些状态【必须写一个函数 render】 8 constructor(){ 9 // super 必须要写 10 super(); 11 this.state = { 12 message:"王五" 13 } 14 } 15 16 // react的生命周期函数【具体信息请向下划】【react中的函数不用加()】 17 render(){ 18 let {message} = this.state; 19 return ( 20 // Fragment 作用当做节点标签使用,但是不会被渲染成标签【类似文档碎片】 21 <Fragment> 22 /*改变handleClick方法中this的指向,未改之前this指向此div元素【但又因为此div是虚拟dom,所以this指向null】*/ 23 <div onClick={this.handleClick.bind(this)}>{message}</div> 24 </Fragment> 25 ) 26 } 27 28 handleClick(){ 29 /* 30 react 中不允许这这样改变数据 31 this.state.message = ‘1234‘; 32 */ 33 34 this.setState({ 35 message:"1234" 36 }) 37 } 38 } 39 40 //将组件导出去 41 export default App;
标签:key 生成 document 大写 tom ret 标签 sele imp
原文地址:https://www.cnblogs.com/jokehl/p/9998137.html