04-react-jsx

jsx语法中注意事项

• 在jsx中写注释

{

// 写在这里

}

• 写样式

如何在react组件中使用样式？

将样式写在一个单独的css文件中，在js文件中通过import的方式引入

在react中有class这个类，所以当给标签加样式类时，需要将class变成className

在输入框中，输入的内容如果有时希望这个对象不被转译，可以写如下代码

dangerouslySetInnerHTML={{__html: item}}

• 标签label上面的for，会被react认为成for循环的for，需要改成htmlFor

拆分组件和组件中传值

• 父组件传递给子组件数据，通过属性，传递给子组件，子组件中通过this.props.属性名来获取
• 子组件修改父组件的数据
  • 实际上真正修改父组件数据的还是父组件，我们需要将这个修改父组件数据的方法，通过属性传递给子组件
  • 在子组件中，通过this.props.属性名来获取该方法，但是需要注意的是 ，当我们将父组件的方法传递给子组件时，需要修改this指向的问题

在setState中可以传入一个对象，也可以传入一个函数，如果传入一个函数，就会将这过程变成异步的，需要在外面先保存数据

在react中，父组件可以通过props传递数据给子组件，但是子组件只能是使用这个数据，不能修改这个数据。------单向数据流概念

• bug，比如，父组件中有5个子组件，同时使用了一个数组，如果我允许这个子组件修改我的数据，那我就不知道是哪个子组件修改了我的数据

react的特点

声明式开发(减少大量操作dom)

可以与其他框架并存

组件化

函数式编程(更好的用于前端自动化编程)

单向数据流(上面有解释)

视图层框架(大型项目中，数据交互复杂时，需要借助redux等)