react 修炼
一、React 概念理解
1、优缺点：（有待验证）
a.reactJs组件难以在复杂的交付页面中复用；
b.reactJs的虚拟DOM的算法慢且不准；
c.reactJs 的HTML模板功能不完备且不健全；
d.reactJs与服务器通信时需要复杂的异步编程；
二、React 项目搭建
1、安装node.js
a.到node.js官网下载node.js，选择安装路劲，选择npm 包管理器，安装至完成；
b.打开命令窗口（window+R -> cmd）输入 npm - v，输出 版本号 即安装完成；
c.配置npm的全局模块的存放路径、cache的路径，此处我选择放在：C:\Program Files\nodejs
输入如下命令：
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache"D:\Program Files\nodejs\node_cache"2.创建项目
3.项目结构及配置
三、React 语法
1.引用模块 import 与 require
用import引入的组件，该组件必须以export default
用require引入的组件需要底部生命module.exports = component
例:
import component from './A' 而 'A.js' 中的命名为component 方法必须用export default
const component = require('./B') 而 'B.js'中的命名为component 方法module.exports = component
例：
A.js:
export const A = 42
引用A.js 的js文件：import { A } from './A' // 正确，因为A.js中有命名为A的export
import { myA } from './A' // 错误！因为A.js中没有命名为myA的export,需在A.js文件中添加 export const myA = 43 的定义
import { Something } from './A' // 错误！因为A.js中没有命名为Something的export,需在A.js文件中添加 export const Something= 45 的定义 2.{}的用法
a.因为export 的 default 只能有一个，所以要多个的写法 export A,{A1,A2} ，引用对应写法：一个 import A from './A 多个import A,{A1,A2} from './A'；
（另：引用时可以重命名 import A,{A1 as B1 , A2 as B2} from './A'）
b.组件定义extends React.Component{}
c.组件渲染 render() {}
d.组件的参数：{参数}
e.注释必须写在花括号中 {/*注释...*/}
class Name extends React.Component { render() { return <h1 style={myStyle}>网站名称：{this.props.name}</h1>; } }
3.定义组件extends Component
a.定义组件采用 class 组件名 extends React.Component
b.组件相当于一个 虚拟DOM元素，调用方法 < 组件名 />
c.其中自带属性props需用this.props
d.使用 function 组件名(props) 来定义组件,其props直接用，调用< 组件名 />
var myStyle = {color:'red',textAlign:'center'}
class Name extends React.Component {
render() {
return <h1 style={myStyle}>网站名称：{this.props.name}</h1>;
}
}
class Url extends React.Component {
render() {
return <h1>网站地址：{this.props.url}</h1>;
}
}
class Nickname extends React.Component {
render() {
return <h1>网站地址：{this.props.nickname}</h1>;
}
}
function App(props) {
return (
<div>
<Name name={props.name}/>
<Url url={props.url}/>
<Nickname nickname={props.nickname}/>
</div>
);
}
4.组件的 渲染 render() 与 解除渲染挂载 unmountComponentAtNode()
ReactDOM.render() 是渲染方法，所有的 js,html 都可通过它进行渲染绘制，他又两个参数，内容和渲染目标 js 对象，
内容：就是要在渲染目标中显示的东西，可以是一个React 部件，也可以是一段HTML或TEXT文本。（另：内容return里的HTML需要有 元素(如：div)包裹）
渲染目标JS对象：就是一个DIV或TABEL,或TD 等HTML的节点对象。
const element = <h1>Hello, world!</h1>;
ReactDOM.render( element, document.getElementById('example') );
unmountComponentAtNode() 这个方法是解除渲染挂载，作用和 render 刚好相反，也就清空一个渲染目标中的 React 部件或 html 内容。
ReactDOM.unmountComponentAtNode(div);
5.JSX差异
a. 用 className 替代 class
b.用 htmlFor 替代 for
c.嵌套多个 HTML 标签，需要使用一个 div 元素包裹它
d.自定义属性 data-
e.React JSX 代码可以放在一个独立文件上，如 helloworld_react.js 文件，使用时引入<script type="text/babel" src="helloworld_react.js"></script>
f.表达式写在花括号 {} ，如：<h1>{1+1}</h1>
g. JSX 中不能使用 if else 语句，但可以使用“三元运算”即 : ?" ":" "
h.内联样式style=" "不可以直接设置，样式需定义在参数中，再style = {myStyle}传进去
i.React 会在指定元素数字后自动添加 px
j.在标签外的的注释不能使用花括号 /*注释...*/，在标签内的注释必须写在花括号中 {/*注释...*/}
k.JSX 允许在模板中插入 富文本的数组，数组会自动展开所有成员，即：
var arr = [ <h1>菜鸟教程</h1>, <h2>学的不仅是技术，更是梦想！</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );
