1.JSX语法规则
1.遇到
<>以html形式进行解析
- 遇到
{}以js形式进行解析
2.基础模板分析
// JSX创建的DOM :也叫虚拟DOM // 理解: <h1>hello react</h1> 看做一个对象类型的变量 // 1. 只保存了DOM的信息 还是虚拟的 //最外层只有一个容器 不要忽略闭合标签 // ():可以包裹JSX语法 可以换行 缩进 var element = ( <div> <h1>hello react</h1> <p> 你好</p> </div> ); console.log(element); //假的 只是把信息存了 还没有创建它 // 显示一个对象的所有属性和方法 console.dir(app); //真的 // 2. 通过JSX 信息 绘制真正的DOM render ReactDOM.render(element, app); // 会覆盖之前的box内容
3.插值
var name = "yzs" var age = 10 var element = ( <div> <h1>hello react</h1> <p> 你好</p> {/* 注意注释的写法 {变量名} 注意不要习惯直接写成2层{{}} */} <p>{name}</p> <p>{"名字:"+name}</p> <p>年龄:{ 10+ 18}</p> </div> );
4.v-if 替代 用的是短路 && ||
{/*undefined null false 不会显示 这些特点可以代替某些v-if的操作 */} <p>{undefined && "易经"}</p> <p> {age > 18 && "成年人"}</p> <p>{age > 5 ? <b>成立</b> : <b>不成立</b>}</p>
1.复杂的布局也会单独声明布局对象 ,用来切换显隐更真实
5. v-for 替代 方案
5.1 数组直接展开
react中数组会自动展开
// 实现类似vue-for指令效果 var numbers = [ <h1 key="1" className="test-c"> vue </h1>, <h2 key="2">react</h2>, <p key="3">angular</p> ]; ReactDOM.render( <div> {["react", "vue", "小程序"]} {/* 数组可以自动展开显示*/} {numbers} {/* 对象不能直接解析*/} </div>, app );
1.JSX 布局直接写个 数组会自动展开
2.数组直接装JSX 布局对象,自动展开
3.key 和vue中
key一样 用于虚拟DOM 的diff计算
5.2数组map遍历
1.这里不使用forEach是 因为forEach没有返回值
2.map 不修改原数组 而且返回新数组
var newsArr = [ { url: "https://www.jianshu.com/u/5b862adfdb97", content: "天行健,君子以自强不息;" }, { url: "https://www.jianshu.com/u/5b862adfdb97", content: "地势坤,君子以厚德载物" } ]
<div> <ul>{ newsArr.map((item, index) => { return ( <li key={index}> <a href={item.url}>{item.content}</a> </li> ) }) } </ul> </div>
5.3 优化
1.布局一般不写逻辑对比vue template
// 服务器获取的数据结构 let persons = [ { name: "yzs", description: "郑州" }, { name: "Vue", description: "尤雨溪 尤大" }, { name: "react", description: "FaceBook" }, { name: "Angular", description: "goole" }, { name: "小程序", description: "鹅厂" } ] let MyList = persons.map((item, index) => { return <li key={index} className="test"> <h1>{item.name}</h1> <p>{item.description}</p> </li> }) // ***********************布局 let element = ( <div> <ul> {MyList} </ul> </div> ) ReactDOM.render(element, app)
6.JSX编译原理
其实了解
vue的render函数的,这里应该也非常easy
// var html = <div id="box"> hello</div> // 注意这里是 React 那个核心文件的内容 // var html = React.createElement("div",{id:"box"},"hello") // 多个节点 就是数组 var html = React.createElement("div", { id: "box" }, [React.createElement("strong", { key: 1 }, "hello")], [React.createElement("span", { key: 2 }, "span")]) ReactDOM.render(<div> {html} </div>, app)
