react 学习记录（一）

一、react 特点

JSX语法

1.JSX 即javascript XML,它是对javascript语法扩展。
优点：
1.快，执行速度更快，因为它在编译为javascript 代码后进行了优化。
2.可以使用熟悉的语法仿照HTML来定义虚拟DOM。从而编写模块更加简单快速

	ReactDom.render(
		<div>
			<h1>{ 2+2 }</h1> // javascript 表达式由{}表示
		</div>,
		document.getElementById('root') // 挂载的根节点
	)

虚拟DOM

优点：高效速度快，跨浏览器兼容 虚拟DOM是在DOM的基础上建立一个抽象层，其实实质是一个javascript
对象，当数据和状态发生变化，都会被自动同步到虚拟DOM中，最后再将变化的部分同步到DOM中。

组件

组件是react的核心，一个完整的react 应用是由若干个组件搭建起来的，每个组件有自己的数据和方法。

灵活性

react 只是MVC中的view层，自己无法构建大型应用，需要与已有的框架和库和配合。如：Redux(状态管理)、Axios/Fetch（异步请求）

二、组件的学习

1. 定义

在src目录下新建components文件夹，在该文件夹下创建table.js
src/components/table.js

	import React, { Component } from 'react'
	class Table extends Component {
		constructor(props) {
	        super(props); // 子类必须在constructor方法中调用super方法，否则新建实例时会报错
	    }
	    render() {
	    // class 是关键字，所以只能用className
	    	<div>
	    		<p className="text">这是自来子组件的数据</p> 
	    	</div>
	    }
	}
	export default Table

2.引入

在对应的父组件里引用（我这里是直接在App.js 里引用的）

	import Table from './components/table.js' // 注意路径哟
	function App() {
	  return (
	    <div className="App">
	        <header className="App-header">
	            <Table />
	        </header>
	    </div>
  );
}

export default App;

3.props的使用

作用：从外部转入组件内部的数据，由于react是单向数据流，所以props基本上也就是服从父组件向子组件传递数据（只读性）

	// 父组件
	function App() {
     const Head = { heard: '我是来自父组件的数据' }
     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>
               <h4>Hello React !</h4>
               <Table Head = { Head.heard } />
           </header>
       </div>
     );
}
//子组件使用
<p className="text">{ this.props.Head }</p>

定义props里的数据的默认值

	Table.defaultProps = {
	    Head : '默认值111'
	}

定义props里数据的类型,可以声明为以下几种类型 注意定义类型时需要引入import PropTypes from "prop-types" //引入模块

	optionalArray: PropTypes.array,
	optionalBool: PropTypes.bool,
	optionalFunc: PropTypes.func,
	optionalNumber: PropTypes.number,
	optionalObject: PropTypes.object,
	optionalString: PropTypes.string,
	optionalSymbol: PropTypes.symbol,
	
	Table.propTypes = {
	    Head: PropTypes.string
	}

小结：
props 是一个从外部传进组件的参数，主要作为从父组件向子组件传递数据，它具有可读性和不变形，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props不会改变

4.state

state 是什么呢？
state 是一个组件的内部数据状态，相当于vue 组件里的data

用法：

class Table extends Component {
      constructor(props) {
          super(props);
          this.state = { count: 0 };
      }
      render() {
      		return (
      				<div>{this.state.count}</div>
      		)
      }
  }

setState

state 是可以被改变的。需要通过this.setState() 方法来修改state。

注意：
1. 当我们调用this.state 方法时，react 会更新组件的数据状态state ，并且重新调用render方法来对组件进行渲染。
2.this.state = 初始化数据this.state（construction是唯一能够进行初始化的地方）
用法：

	this.setState({ count: 1 })
	// 写法二
	this.setState(state => {  // state值的是 初始化定的this.state
          return { count: state.count + 1 }
      })

总结
state主要是用来控制、改变组件自己的状态，它只能在constructor重初始化，不可通过外部访问和修改，只能通过内部的setState 来修改。