react之基础篇1

一.虚拟dom

创建方式：1.<script type='text/javascript'>

​					const getNew=react.createElement('name',{id},'content')

​					ReactDom.render(getNew,document.getElementById('id'));//渲染

</script>

​		 2.<script type='text/babel'>//浏览器不能直接解析JSX代码，需要babel.js转译

​					const getNew=<h1 id={id}>{content}</h1>//使用jsx语法

​					ReactDom.render(getNew,document.getElementById('id'));//渲染

</script>

虚拟dom和真实dom是一一对应关系；轻----》重；更新虚拟dom本身，是不会更新界面的，只有render时才会更新界面;

二.jsx

​

作用：用来创建虚拟dom，const getNew=<h1 id={id}>{content}</h1>==>1.不是字符串；2.不是标签；3.是一个js对象；

三.模块和组件，模块化和组件化

​

模块：向外提供特定功能的js程序，即一个js文件

​	模块化和组件化：形容项目或编码方式

​	组件：实现局部特定功能的代码集合（html/js/css）

四.面向组件编程

​

1.工厂函数组件--》简单组件（没有状态的组件）

eg:	function Test(props){

​			return <h2>函数组件</h2>

}

​2.es6类组件-----》复杂组件

eg:	class Test extends React.component{

​			render(){

​					return <h2>函数组件</h2>

​		}

}

/组件内新添加的方法：内部this不是组件对象

/组件内的render()方法，内部this是组件对象（此方法是组件内置的方法）

 ***解决：1强制绑定

constructor(){

​	this.fn=this.fn.bind(this)

}

调用：{this.fn}

//此种绑定方式this.fn传给组件标签后是丢失了this的

foo(a),接收到参数a时，并不知道a是其他变量的属性，故函数内部this指向为undefined

2.使用箭头函数的方式调用

​	{（）=>{this.fn()}}

注：箭头函数的this指向由其外层的普通函数的this指向来决定

五.组件三大属性

state

props：

​		指定属性默认值：组件名.defaultProps={}

​		指定属性值的类型和必要性：组件名.propTypes={key:PropTypes.string/func/number.isRequired...}

refs:方式1<h2 ref='content'></h2>

​		获取：this.refs.content//可以拿到h2dom元素

​		方式二：	<input ref={input=>this.input=input} />

​		获取 this.input

​	子组件中不能直接改变父组件的状态

​	解决：父组件定义函数，传递给子组件，子组件调用