1.JSX

3.组件生命周期…这篇博文主要对一些刚入门react框架的同学以及对react基本知识进行巩固的最后就是精简一下基本知识以方便自己查看感谢参考有问题评论区交流谢谢。

1.JSX

这是一段jsx代码语法看起来很像html实际上jsx语法所用的标签可以使用html标签也可以使用自定义的react组件作为jsx中的标签。

jsx可以使用变量name就是一个变量注意变量要用大括号括起来

const

这两个都是很重要的概念。

react组件正常工作都需要依赖这两个组件这两者都与react的状态有关系两者的区别是

props是外部组件通过props将状态或者方法传递给当前组件来使用所以props是父组件与子组件之间传递的接口

总之一句话

是react对外暴露出来的钩子函数我们开发的时候可以在这些函数中定义一些逻辑来实现业务功能逻辑。

组件的挂载阶段constructorrendercomponentDidMount

组件的更新阶段rendercomponentDidUpdate

4.列表

渲染列表也是比较常用的这里keys的值都是不相同的为了保证当列表发生变化的时候react底层把key作为每一项的唯一标识。

const

5.1事件处理是和用户。

进行交互必不可少的。

注意react中事件名

onClick

这个this就是当前的组件如果没有这一句话this指向的是当前组件的event点击事件对象。

class

{constructor(props){super(props);this.state

{isToggleOn:

this.handleClick.bind(this);}handleClick()

({isToggleOn:

onClick{this.handleClick}{this.state.isToggleOn?

ON:OFF}/button)

此外还有es6的箭头函数同样也能实现这种效果即上面的代码handleClick绑定this部分

也能换成下面代码

绑定onChange事件当用户输入修改输入框内容会触发onChange事件事件处理拿到用户修改后的数据赋值给state.value的值state发生变化组件会重新被渲染render方法重新被执行input中的

value{this.state.value}重新设置成新的value值。

class

this.handleChange.bind(this);this.handleSubmit

this.handleSubmit.bind(this);}handleChange(event)

event.target.value});}handleSubmit(event)

{alert(A

this.state.value);event.preventDefault();}render()

{return

onSubmit{this.handleSubmit}labelName:input

typetext