React之jsx语法特性

jsx 语法，直接可以在js中使用html标签。

还可以通过花括号的形式，在html标签中，写js表达式。

<div>
{ 1 + 2 }
hello,world！
</div>


事件是大写

<button onClick={this.handleBtnClick.bind(this)}>add</button>


React中的编程思想是，面向数据编程。只要定义数据就OK了，数据变了，页面展示的内容就会变了。

React删除不需要操作dom，只需要操作数据就可以了。将对应的数据从删除，自动就会移除dom。只要找到对应的下标就可以了。

组件拆分。大组件，可以引用小组件。组件之间可以传递数据。

return <TodoItem content={item}>


{this.props.content}


父子组件，父组件通过属性的形式向子组件传递参数。

子组件通过props接受父组件传递过来的参数。

子组件，向父组件传值，要调用父组件传递过来的方法。

针对知识点，以点带面，打开知识盲区。

constructor(props) {
super(props);
this.handleDelete = this.handleDelete.bind(this);
}


jsx中使用css，对象方式处理样式。

<button style={{backgroud:'red',color:'#fff'}}></button>


className替代之前的class属性来处理class。

需要在index.js入口文件中，引入css文件。

<React.Fragment>
</React.Fragment>


外层包裹标签，替代div标签。

优化代码，让它优雅。

官网学习，读官方文档，建议阅读英文文档。

或者视频学习。