前端框架--React（1、基础语法）

什么是React

• React 是一个用于构建用户界面的 JavaScript 库，能够帮助你操作DOM呈现页面效果

• 使用了虚拟DOM和优秀的Diffing语法，减少了与真实DOM的交互

• 具有组件化的特点，并且在React中组件通常以函数式组件或类式组件存在

• 技术成熟，社区完善，配件齐全，适用于大型Web项目

安装方式

1. 通过在线cdn ,使用script标签导入

2. 通过安装cli脚手架

   npm i -g create-react-app 安装React脚手架工具

   create-react-app [projectName] 创建基本的React项目

   npm start

基本语法

jsx

在React中 使用了jsx来代替常规的JavaScript。JSX= Javascript+ xml, 就是Javascript和XML结合的一种格式，是 JavaScript 的语法扩展。它有些像jsp，也是将开发语言混在html当中。

jsx 语法规则：

1. 定义虚拟DOM时，不要写引号

2. 标签中混入js表达式要用{}

3. 样式的类名指定不要用class 要用className

4. 内联样式，要用style={{key:value}}的形式去写

5. 只有一个根标签 且 标签必须闭合

6. 标签首字母 若小写开头 则转化为html中的同名元素 若大写开头 则被认定是组件

7. jsx 中的{}中只能写js表达式 如

   1. a
   2. a+b
   3. demo(1)
   4. arr.map
   5. function name() {}

state

import { Component } from 'react'

class App extends Component {
    // 在 constructor构造器中主要用于定义 状态，也就是常用的 state
    // state可以看作一个全局私有变量，除了设置了它的组件，其余组件都无法使用
	constructor() {
		super(...arguments)
		this.state = {
			text: 'this is a HomePageeeeee!!!!!',
		}
	}
}

export default App

注意：

• 不要直接修改state，如果需要修改state中的值，则使用 setState方法

  this.state.text = 'hello' // ×
  this.setState({text:'hello'}) // √

• state的赋值更新可能是异步的，如果你需要依赖它的更新去进行一些操作的话，可以让 setState() 接收一个函数而不是一个对象

  this.setState(function(state, props) {
    return {
      text: state.text + props.seb1
    };
  });

• state的更新会被合并 如果state包含多个属性，你可以使用 setState() 来单独更新它

页面渲染

React页面渲染的核心就是 Render函数，它会将return的元素渲染到页面上

函数式编程

import ...
// 这是一个简单的函数式组件渲染

// 创建函数式组件 当函数retrun html元素时，这个函数会被认为是一个 函数组件
// 组件的名字就是函数的名称（大写）在html中如果需要使用js，则使用 {}包括起来
function  demo() {
    let state = {text: ''this is a HomePageeeeee!!!!!}
    return <h2>我是{state.text}</h2>
}

export default demo

类式编程

import ...

class App extends Component {
	constructor() {
		super(...arguments)
		this.state = {
			text: 'this is a HomePageeeeee!!!!!',
		}
	}

	render() {
		let { text } = this.state
		return (
			<div className='App'>
				<header className='App-header'>
					<p>{text}</p>
				</header>
			</div>
		)
	}
}

export default App

props参数

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

注意：无论是函数式组件还是类式组件，都不能修改props。

function  demo(props) {
    return <h2>我是{props.name}</h2>
}

class Welcome extends React.Component {
  render() {
    return <h1>我是{this.props.name}</h1>;
  }
}

循环渲染列表和条件渲染

import ...

class App extends Component {
	constructor() {
		super(...arguments)
		this.state = {
			list: [{name: '张三'， age: 18}, {name: '李四'， age: 20}],
		}
	}
    
    changeText(){
        log('in')
    }

	render() {
		let { list } = this.state
		return (
			<div className='App'>
				<header className='App-header'>
                    {list.forEach(item=>{
                        (
                        	<p>{item.name}</p>
                        	<p>{item.age}</p>
                    		if(item.name == '张三'){
                            	<button onClick={changeText}></button>
                        	}
                        )
                    })}
					
				</header>
			</div>
		)
	}
}

export default App

嵌套组件

import ...

function  demo(props) {
    return <h2>我是{props.name}</h2>
}

function  demo2() {
    <Demo name="topTab"></Demo>
    return <h2>我是{state.text}</h2>
}

export default demo

事件处理

内置生命周期事件

React组件的生命周期分为三个状态

• Mounting（挂载）：已插入真实DOM 回调函数执行顺序:
  • constructor() // 先初始化数据
  • render() // 后初始化试图
  • componentDidMount() // 回调通知
• Updating（更新）：正在被重新渲染，当组件的props或state发生改变时：
  • render() // 重新渲染视图
  • componentDidUpdate() // 回调通知
• Unmounting(卸载)：已移出真实 DOM，卸载组件之前
  • componentWillUnmount()

自定义事件

基础语法

import ...

class App extends Component {
	constructor() {
		super(...arguments)
		this.state = {
			text: 'this is a HomePageeeeee!!!!!',
		}
	}
    
    changeText(){
        this.setState({text: "click me "})
    }

	render() {
		let { text } = this.state
		return (
			<div className='App'>
				<header className='App-header'>
					<p>{text}</p>
                    <button onClick={changeText}></button>
				</header>
			</div>
		)
	}
}

export default App

默认行为

在 React 中不能通过返回 false 的方式阻止默认行为。必须显式的使用 preventDefault。

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

this指向

由于ES6的Class内部特性，React组件内部的方法需要绑定this指向。

在整个Class类中，所有的this指向都是Class的实例，但是当回调函数被赋值后，其体内的this指向并不会继承原本this的指向，因为此刻触发该回调函数的并不是Class的实例。所以你需要手动绑定该this指向，否则它将会是undefinded。

解决方案：

1. 箭头函数

   import ...
   
   class App extends Component {
   	constructor() {
   		super(...arguments)
   		this.state = {
   			text: 'this is a HomePageeeeee!!!!!',
   		}
   	}
       
       changeText(){
           log('this')
       }
   
   	render() {
   		let { text } = this.state
   		return (
   			<div className='App'>
   				<header className='App-header'>
   					<p>{text}</p>
                       <button onClick={()=>this.changeText}></button>
   				</header>
   			</div>
   		)
   	}
   }
   
   export default App

2. 使用bind()函数手动绑定this

   import ...
   
   class App extends Component {
   	constructor() {
   		super(...arguments)
   		this.state = {
   			text: 'this is a HomePageeeeee!!!!!',
   		}
   	}
       
       changeText(){
           log('this')
       }
   
   	render() {
   		let { text } = this.state
   		return (
   			<div className='App'>
   				<header className='App-header'>
   					<p>{text}</p>
                       <button onClick={this.changeText.bind(this)}></button>
   				</header>
   			</div>
   		)
   	}
   }
   
   export default App

3. public class fields 语法，这种语法需要配置开启，使用Create React App 命令创建的项目默认开启

   import ...
   
   class App extends Component {
   	constructor() {
   		super(...arguments)
   		this.state = {
   			text: 'this is a HomePageeeeee!!!!!',
   		}
   	}
       
       changeText = ()=> {
           log('this')
       }
   
   	render() {
   		let { text } = this.state
   		return (
   			<div className='App'>
   				<header className='App-header'>
   					<p>{text}</p>
                       <button onClick={this.changeText}></button>
   				</header>
   			</div>
   		)
   	}
   }
   
   export default App

传递参数

import ...

class App extends Component {
	constructor() {
		super(...arguments)
		this.state = {
			text: 'this is a HomePageeeeee!!!!!',
		}
	}
    
    changeText(str){
        log(str) // log 'hello'
    }

	render() {
		let { text } = this.state
		return (
			<div className='App'>
				<header className='App-header'>
					<p>{text}</p>
                    <button onClick={(e) => this.changeText('hello', e)}></button>
				</header>
			</div>
		)
	}
}

export default App

import ...

class App extends Component {
	constructor() {
		super(...arguments)
		this.state = {
			text: 'this is a HomePageeeeee!!!!!',
		}
	}
    
    changeText(str){
        log(str) // log 'hello'
    }

	render() {
		let { text } = this.state
		return (
			<div className='App'>
				<header className='App-header'>
					<p>{text}</p>
                    <button onClick={this.changeText.bind(this, 'hello')}></button>
				</header>
			</div>
		)
	}
}

export default App