React笔记

JSX语法构建html
html变量绑定{里面是变量}

const Fruit = (props) => {
		return (
			<div>{props.name}</div>
		)
} 

注释{/*注释内容*/}

无状态，意思大概是参数由外部传递，组件内部不保存
无状态函数组件

const Fruit = (props) => {
		return (
			<div>{props.name}</div>
		)
} 

无状态组件

class Fruit extend ReactDOM.render {
	constructor(props) {
		super(props)
	}
	render() {
			return (
			<div>{props.name}</div>
		)
	}
}

有状态组件

class Fruit extend ReactDOM.render {
	constructor(props) {
		super(props)
		//state 表示状态
		this.state = {
			name: 'apple'
	}
	}
	render() {
			return (
			{/*调用state里面的数据*/}
			<div>{this.state.name}</div>
		)
	}
}

使用setState改变state，不能直接改动

this.setState({
	//只需要传你要改动的数据，react会自动对比。
	name: 'orange'
})

react 通过symbol 使用 iconfot

xlinkHref改成驼峰式

<svg class="icon" aria-hidden="true">
 	 <use xlinkHref="#icon-youlianguanli"></use>
 </svg>

如果使用module css给iconfont 添加样式
你可以在 svg标签多加一个class
或者使用标签选择器
如果直接使用.icon选择器写样式不会生效
因为modulecss会将类选择器变成这样
.style_icon_1CBJH的格式，浏览器就无法正确解析到。