1.个人理解react就像.net mvc里的view，但实则不是。又有点像component开发，就是把任何控件都写成一个component，一个页面组装多个控件，就像angularjs1里的directive。
2.React引入了一个虚拟dom（virtual dom）的概念，即用js实现了一套dom api。当界面有变化时，react重构dom树，与上一次的dom树进行比较，然后只刷新变化的部分。最重要的一点是它可以批处理变化，个人理解起来就是你对某个元素做了n次操作，它会合并到最后一次。打个比方，某个元素的值是1，你先后改它为2，4，5，8。按常理来说这个元素做了4次的更改，dom也得更新4次，但react可以把这些改变合并起来，只认为它从1直接变成了8。再则，虚拟dom是内存数据操作，所以性能还是很高的，并且操作的也只是变化的部分，就更一步提高了性能。
3.在react中，我们按照UI模块来划分成各自不同且独立的组件。而每个组件都应该具备3个特征：
1）可重用：就是组件可复用。
2）可组合：大家可以用不同组件组合成不同新的组件。可嵌套
3）可维护：每个组件因为是独立的，都有各自的逻辑，所以每次只需要改自己内部内容就可以了。
4.React 可以引用react后用纯js编写，因为浏览器可以直接解析。但一般来说还是要再引入一个JSX。个人理解这个JSX就是个编译转换用的，把react的语法转换成浏览器可直接解析的js。
5.基础语法：
1）最简单的React.render，把render里的模版输出到html里的dom里。注意：react不依赖于jquery，虽然可以用jquery，但render的第二个参数必须用js原生的。如：
React.render(<h1>Hello World</h1>, document.getElementById('container'));
2）JSX的语法有个很特殊的地方，就是不加引号。允许html和js进行混写。
var names = ['Jack', 'Tom', 'Alice'];
React.render(<div>{names.map(function(name) {return Hello,{name}!})}</div>, document.getElementById('container'));
3) JSX允许在模版里直接插入变量，包括数组。如果是数组，会自动展开。
6.1组件属性
React.createClass方法用于生成一个组件类:
var Greet = React.createClass({render: function(){ return <h1>Hello, {this.props.name}</h1>}});
React.render(<Greet name="Jack">,document.getElementById('container'));
注意：1）创建的组件首字母必须大写
2）为元素添加css的class时，要用className
3）组件的style也要用双大括号，如style={{width: this.state.width}}
4）变量都用{}包裹，不是双引号。
6.2组件状态
组件之间要相互互动，我们可把组件看作一个状态机，最开始有个初始值，然后互动改变状态值，从而重新渲染UI。例子：
var InputState = React.createClass({ getInitialState: function(){ return {enable = false}},
handleClick: function(event){ this.setState({enable: !this.state.enable})},
render: function(){ return <p><input type="text" disabled={this.state.enable}></input>
<button onClick={this.handleClick}>Change State</button></p>}})
解读：getInitialState是组件初始化的时候自动执行，必须返回null或一个对象值。方法里的enable是自己取名的。在handleClick里，通过this.state.属性名来访问属性值，这里我们把input的disabled与enable进行绑定。
原理：用户点击组件，导致状态改变，每次修改后，就会重新自动调用render方法
6.3 组件的生命周期
生命周期分为3个状态：
Mounting: 已插入真实DOM
Updating:正在被重新渲染。
unmounting:被移出真实DOM
React为每个状态提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共计五种处理函数，即：
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React还提供两种特殊状态的处理函数:
componentWillReceiveProps(object nextProps) 已加载组件收到新参数时调用
shouldComponentUpdate(object nextProps, object nextState)组件判断是否重新渲染时调用
6.4组件的嵌套
var Search = React.createClass({ render:function(){return <div>{this.props.searchType}:<input type="text"></input><button>Search</button></div>}})
var Page = React.createClass({ render: function(){return <div><h1>Hello</h1> <Search searchType="Title" /> <Search searchType="Content" /></div> }})
React.render(<Page/>,document.getElementById('container'));
网友评论