react 相关知识点小结

使用react中的一些经验和基础的知识总结

样式

1. 普通的css样式，通过className=””来引用
2. React中定义的样式，通过style={}来引用

<!--普通css样式-->
<style>
	.style_2{
		background-color: #6699ff;
		font-size: 24px;
		padding: 3px 5px 3px 5px;
		color: #FFFFFF;
	}
	.Separate{
		height: 10px;
	}
</style>
<span className="style_2">账号:</span>

<!-- React的css样式 -->
	var style_1={
		color:'#9900ff',
		padding:3,
	}
<h1 style={style_1}>落叶丶Fly的React小站</h1>

组件

受控组件和非受控组件
高阶组件 函数子组件
逻辑组件和UI组件

props和state

state：React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

props：state 和 props 主要的区别在于 props 是不可变的，单向数据流. 而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

函数

React中的button点击事件和普通的JavaScript差不多，但是要注意onClick中的C要大写，否则会报错

handleClick = () => {} (也可以使用bind(this))
onClick = {this.handleClick}

总结

react 是一种新的开发思想,数据驱动,虚拟DOM,组件化开发,单向数据流等等

赏

1分也是爱

微信