React 基础入门，基础知识介绍
React不管在demo渲染还是UI上，都是十分方便，本人菜鸟试试学习一下，结合阮一峰老师的文章，写下一点关于自己的学习react的学习笔记，有地方不对的地方，希望各位大牛评论指出；
PS：代码包下载：
react包引入，在标签里引入包；
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div ></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
当然 在最后编译的时候 可以直接使用JSx ，引入一个 JSXTransformer.js 就可以直type中看使用text/Jsx 这样的好处是在我的编译器（webstorm）中有关键词的颜色区分；
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div >
ReactDOM.render(
<h1>Hello, world! </h1>,
document.getElementById('example')
);
</script>
</body>
</html>
1.基础语法：
ReactDom.render 工三个参数，第一个元素 ，第二个是绑定的元素，第三个是回调函数
JSX语法：遇到<>开头用 HTML语法解析，遇到{} 用javascript 解析；
ReactDom.render(
<div>
{
names.map(function (name) {
//这里可以定义变量
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
)
2.组件
var NewString = React.createClass({
render: function () {
var s=<h1className="two"two">
<ione" >MMMMMM{this.id},{this.props.name},{this.props.id},{this.props.className}
</i></h1>;
return s;
}
})
组件的属性可以在组件类的 this.props 对象上获取。
就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，
必须包括一个且 只能包括一个顶层标签；
组件可使用单双标签，没区别，但是当需要获取组件的子元素的时候，必须使用双标签。
双标签获取组件下面的子类：
我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object
var NotesList = React.createClass({
render: function () {
return (
<p>
{
React.Children.map(this.props.children, function (child) {
console.log(child)
return <p>{child}</p>;
})
}
</p>
);
}
});
ReactDOM.render(
<NotesList>
<spanchildren">hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
);
3.PropTypes
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}});
上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。
这样一来，title属性就通不过验证了
4.getDefaultProps
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}});
getDefaultProps 设置默认title的值。
ReactDOM.render(
<MyTitle />,
document.body);
当组件上没有title，this.props.title的值等于默认值 ：Hello World；
ReactDOM.render(
<MyTitle title=“New title”/>,
document.body);
当组件上有title，this.props.title的值 ：New title；
5、获取真实的DOM节点（ref）
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput111.focus();
this.refs.pp.style.color="red";
},
output:function(){
alert("wo xtet")
},
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return (
<div>
<inputtype="text"ref="myTextInput111"onClick={this.output} />
<inputtype="button"value="Focus the text input"onClick={this.handleClick}/>
<pref="pp">{this.props.title}</p>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。并且可以操作这个DOM，和原生操作Js一样
6、This.state
在组件内可以定义状态，当用户改变这个状态的时候，页面会重新渲染。
getInitialState 是关键字，来定义组件状态
var LikeButton = React.createClass({
getInitialState: function() {
return {
liked11: false,
love:true
};
},
handleClick: function(event) {
this.setState({liked11: !this.state.liked11});
this.setState({love:!this.state.love})
},
render: function() {
var text = this.state.liked11 ? 'like' : 'haven\'t liked';
var text1=this.state.love?"love":"hate";
return (
<p>
You {text} this. Click to toggle.
<br/>
<spanonClick={this.handleClick}>you {text1} this.clcik to tpggle</span>
</p>
);
}
});
当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
7.表单
this.props.value 读取组件的属性（代码黄色处），而要定义一个 onChange 事件的回调函数，通过 表单元素用 event.target.value
非表单用event.target.innerHTMl 操作节点一样方式
var num=12;
var Input = React.createClass({
getInitialState: function() {
return {
value: 'Hello!',
value1:num,
};
},
handleChange: function(event) {
this.setState({value: event.target.value});
this.setState({value1:this.state.value1+=1});
},
render: function () {
var value = this.state.value;
return (
<div value="div111" value={value} onChange={this.handleChange} />
<div>{this.state.value1}</div>
<p onChange={this.handleChange}>{value}</p>
<span>{this.props.value}</span>
</div>
);
}
});
ReactDOM.render(<Input value="!@21"/>, document.getElementById('example'));
8.组件的生命周期
组件的生命周期分成三个状态：
- 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)：组件判断是否重新渲染时调用
附带代码：
var Hello = React.createClass({
getInitialState: function () {
console.log(this);
return {
opacity: 1.0
};
},
componentWillMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
//bind(this) 你可以当做是 使用外部的this(React组件的)覆盖函数中的this.
}.bind(this), 100);
},
render: function () {
return (
<divstyle={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
