2018-09-18 react学习（二）：props & state

在搭建后的react环境下进入src/index.js文件中写业务：

1.引入react & react-dom两个包

image.png

通过console.log我们发现reactdome自带了一个renderAPI，我们可以通过该api来传递并渲染：
语法：
ReactDom.render（jsx元素,注入点，回调）
eg:

image.png

效果如下：

image.png

添加多个元素语法（一定要有根元素包裹，不然报错）：

image.png

组件

react创建组件其实就是创建一个普通的类，但是必须要有继承。

语法：

class 组件名 extends React.Component{
constrctor(props){
super(props)
this.state={
本地状态}}
render(){
returen html/jsx
}
render -专门负责渲染render函数的UI，当别人试用这个组件的时候，render在虚拟dom中渲染
真实dom的渲染只有可能出现在reactdom,它是 浏览器主入口

tips:组件变量名和组件名首字母大写

eg:

tips:一定要有render和return

image.png

or

image.png

效果：

image.png

组件嵌套：

import React from 'react';
import ReactDom from 'react-dom';
let ele=

hello

;
class App extends React.Component{
render(){
return (

); }}
class Header extends React.Component{
render(){return (

这是header组件

)}}
class Wrap extends React.Component{
render(){return (

这是wrap组件

)}}
class Footer extends React.Component{
render() {return (

这是footer组件

); }}
ReactDom.render(
,
document.querySelector('#root'));

效果：

image.png

props:

tips: json数据的传递

image.png

效果：

image.png

state:

es6

image.png

效果：

image.png

es7(不需要构造器)

image.png

state 特殊数据类型

tips：《转义输出》

import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component{
state={
msg:"ok",
strong:'加粗' };
render(){
return (

{this.props.title}

); }}
ReactDom.render(
,
document.querySelector('#root'));

效果：

image.png

定义实例方法：

image.png

image.png