react（二）起步及组件

什么是jsx？

1.FAcebook起草的js扩展语法
2.本质上就是一个js对象，会被babel编译，最终全部会被转换成React.createElement
3.每个jsx的表达式，有且只有一个根节点
4.jsx遵循xml规范，xml规范必须有结束（闭合标签）

首先，我们先来看一段代码：

import React from 'react';
import ReactDOM from 'react-dom';

const a = 1;
const b = 2;

const div = (<div>
    { a } + { b } = { a + b }
</div>)
  


ReactDOM.render(div,document.getElementById('root'));

运行结果：

上面这段代码很简单，就是将a和b加起来然后添加到id为root的html页面中，因为react中默认为index.html为入口文件，所以不需要引入。

再来看一段代码：

import React from 'react';
import ReactDOM from 'react-dom';

const div = (<div>
  <p>
    { null }
  </p>
  <p>
    { "null" }
  </p>
  <p>
    { undefined }
  </p>
  <p>
    { false }
  </p>
  <p>
    { 0 }
  </p>
</div>)
ReactDOM.render(div,document.getElementById('root'));

打印结果为：

为什么会只有两个呢？

因为在react中，表达式里面的内容如果为null、undefined、false都不会显示。

再来看一个：

import React from 'react';
import ReactDOM from 'react-dom';

const obj = {
  name : "aaa",
  age : 30
}

const div = (<div>
  <p>
    { obj }
  </p>
</div>)
ReactDOM.render(div,document.getElementById('root'));

结果为：

原因为在react中对象不能这么写，正确的写法为：

const obj = <span>1111</span>

数组还是和javascript中一样

属性的写法为表达式的形式，写成驼峰命名

代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

const url = "这里放图片" 

const cls = "image"

const div = (<div>
  <img src={url} className={cls} alt="" />
  {/* style的写法 */}
  <img src={url} style={{
    border : "10 px solid #000",
    margin : "50px"
  }} alt=""/>

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

注入攻击
react中的元素保护机制，全部会帮你用innerText的形式，防止注入攻击

元素的不可变性
jsx元素本质就是一个对象，但是这个对象的所有属性全部都是不可以修改的，如果要修改，就必须重新渲染。

组件

组件就是包含内容、样式和功能的ui单元

创建组件
组件的首字母必须大写
两类：
1.函数组件 （必须返回一个react元素）

2.类组件（类组件必须继承React.Component，必须提供render函数，用来渲染组件）

函数组件：

import React from 'react';
import ReactDOM from 'react-dom';

function MyfuncComp() {
  return <h1>组件</h1>
}
// 函数组件的使用有两种方式



ReactDOM.render(<div>
  {/* 1.函数直接调用 */}
  { MyfuncComp() }
</div>, document.getElementById('root'));

运行结果：

不过上面这种调用方式几乎用不上，因为不符合组件书写的规范
看下面这种：

import React from 'react';
import ReactDOM from 'react-dom';

function MyfuncComp() {
  return <h1>组件</h1>
}
// 函数组件的使用有两种方式

ReactDOM.render(<div>
  {/* 2 */}
  <MyfuncComp></MyfuncComp>
  <MyfuncComp/>
</div>, document.getElementById('root'));

运行结果：

通过Type进行了区分，告诉你这是一个函数组件，一定要大写，若是小写，react则认为是一个内置组件，区分形式只能通过首字母来区分。

类组件
先创建一个文件，名为Tndexaa.js。里面的代码如下：

import React from 'react'

export default class Tndexaa extends React.Component{
    //必须要有render函数
    render(){
        return <h1>类组件内容</h1>
    }
}

第二种方式为：

import React,{Component} from 'react'
export default class Tndexaa extends Component{

    // 必须要有render函数
    render(){
        return <h1>类组件内容</h1>
    }
}

这两个是一样的

然后在index.js中写下如下代码

import React from 'react';
import ReactDOM from 'react-dom';
import Tndexaa from './Tndexaa';

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

运行结果如下：

组件的属性
函数组件：属性作为函数的参数。以一个对象的形式进行传递
类组件：属性作为对象的属性，传递给构造函数的参数
React元素，本质上就是一个组件（内置组件），是谁的数据，就归谁，只有自己有权利修改

函数组件接收参数：

import React from 'react';
import ReactDOM from 'react-dom';
import Tndexaa from './Tndexaa';
import Tndexbb from './Tndexbb';

ReactDOM.render(<div>
  {/* 类组件 */}
  <Tndexaa></Tndexaa>   
  {/* 函数组件 */}
  <Tndexbb number={100}></Tndexbb>
</div>, document.getElementById('root'));

新建文件Tndexbb.js

import React from 'react'

export default function Tndexaa(props){
return <h1>函数组件内容接收参数{ props.number }</h1>
}

类组件接收参数：

import React from 'react';
import ReactDOM from 'react-dom';
import Tndexaa from './Tndexaa';
import Tndexbb from './Tndexbb';

ReactDOM.render(<div>
  {/* 类组件 */}
  <Tndexaa number={90}></Tndexaa>   
  {/* 函数组件 */}
  <Tndexbb number={100}></Tndexbb>
</div>, document.getElementById('root'));

import React,{Component} from 'react'
export default class Tndexaa extends Component{
    // constructor(props){
    //     super(props);  //this.props == props

    // }
    // 必须要有render函数
    render(){
        return <h1>类组件内容{this.props.number}</h1>
    }
}

运行结果为：

React中的数据是流式，从上往下流的。