React 特点

声明式写法
组件化
无配置，使用简单
React开发思想以及其他思想的异同

1、create-react-app官方脚手架

准备开发环境
安装

npm install create-react-app

安装之后，构建项目

create-react-app  项目名

进入项目所在目录

npm start

然后就OK了，localhost:3000 打开脚手架，就可以开始使用了，src中编写代码

2、目录结构

index.js 是入口文件
App.test.js 是使用jest做自动化测试用的
App.js 主要js
public 中的index.html就是页面展示

3、知识点

组件指的就是网页上的一部分
React引入，帮助认可语法 <App/> ,大写字母开头都是组件
将组件渲染到节点为root的html中，ReactDOM,表示打开一个组件，将组件渲染到页面上
ReactDOM.render(<App/>,document.getElementById('root'))
导出组件
export default App;
引入组件(引入时可省略.js后缀)
import App from'./App';
render()函数只能有一个根元素
使用<React.Fragment>可代替div并不在html中显示

4、jsx简单语法

1、允许直接写html标签
2、通过 {} 形式可以写表达式，比如 {1+2}
3、类名添加用 className
4、循环 htmlFor
JSX编译
html 相当于 React.createElement 创建节点
jsx是一种语法糖，React.createElement 的语法糖
html编译返回的是一个ReactElement对象

5、组件的书写举例

import React,{Component,Fragment} from 'react';
class 组件名  extends Component{
	//构造函数	
	constructor(props){  
		super(props); // 继承父级参数
		this.state={ //新增本界面参数
			list:[]
		};
		// 绑定参数
		this.handleChange = this.handleChange.bind(this);
	}
	// 改变参数值
	handleChange = () =>{
		this.setState({list : 新数据})
	}
	render(){
		return(
			<div onClick={this.handleChange}>
				我要展示list的内容：{this.state.list}
			</div>
		)
	}
}
export default 组件名；

6、绑定方法

要加bind改变this指向，函数才能正确指向构造函数的this

在调用时绑定
onClick = {this.handleChange.bind(this)}
在constructor中绑定
this.handleChange = this.handleChange.bind(this);
直接使用 onClick = {this.handleChange}
使用箭头函数

7、数据改变

this.setState({…})，是唯一可以改变数据的方法
尽量不要直接修改this.state的值，可以先拷贝一个，达到性能更优

handleDel = (index) => {
	const newlist = [...this.state.list];
	list.splice(index,1);
	this.setSate({
		list:newlist  //冒号左右一样的名字时可以简写为  list
	})
}

8、属性绑定

   `<div  属性名={属性值}></div>`

9、行内样式

style={样式对象}，两个大括号，一个代表赋值，里面的代表对象

<li style={{width:'100%',height:'100%'}}></li>

类名，使用className加类名，这个和css的class不一样，需要注意

import './index.css';
...
<li className='类名'></li>

less也可以以对象形式

import styles from './index.less';
...
<li className={styles.类名}></li>

10、父组件向子组件传值

属性绑定，props接收

父组件属性形式传值

<TodoItem  
	list={this.state.list}
	handleDel={this.handleDel}
/>

子组件props接收

const {content} = this.props;
<li onClick={this.props.handleDel}>{content}</li>

11、子组件向父组件传值

调用父组件方法传值，父组件在方法中接收，并处理

子组件，传值

<li onCLick={()=>{this.handleDel(value)}}}></li>
...
handleDel=(value)=>{
	this.props.handleDel(value);//传值
}

父组件（注意，子组件调用父组件的方法也是父组件以属性形式传过去的）

handleDel=(index)=>{
	console.log('子组件传过来的值',index)
}

12、Props属性

组件像一个函数，接受特定的输入（props）,产出特定的输出（ReactElemnet）
v=f(props)

循环时加上key可以更高效的渲染ReactElement
React.Component严格要求，所有的react组件都必须像纯函数那样使用props

纯函数，不改变参数的值

function sum(a,b){
	return a+b;
}

不是纯函数，会改变输入参数

function sum2(a,b){
	a = a + b;
	return a;
}

13、state React状态

私有的，并且完全受控于当前组件
组件内部的数据可以动态改变
this.setState({}),是更新state的唯一途径

kingsha.

发布了18 篇原创文章 · 获赞 0 · 访问量 367

私信关注

react入门--基础知识