学习react(一)
1、创建虚拟dom并上树的两种方式
//js方式
const vNode = React.createElement('h1', {id:'title'}, 'Hello, world!');
ReactDOM.render(vNode, document.getElementById('test'));
//jsx方式
const vNode = <h1 id="title">Hello, world!</h1>;
ReactDOM.render(vNode, document.getElementById('test'));
2、jsx语法
1、定义虚拟DOM时,不要写引号
2、标签中混用js表达式时需要用{}
注意区分【js语句】和【js代码】
「1」表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
a;a+b;function(arg);arr.map();function test(){}
「2」语句:
if语句;for循环;switch语句
3、样式的类名指定不要用class,需要用className(因为class是ES6内类的关键词)
4、 内联样式要用style={{key:value}}的形式去写,且属性名要使用小驼峰
5、虚拟dom必须只有一个根标签
6、标签必须闭合
7、标签首字母
(1)若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
(2)若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。