React入门状态属性生命周期
html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
<script type="text/babel" src="04.js"></script>
<title>Title</title>
<div id="myDiv"></div>
</head>
<body>
</body>
</html>
//注意 这里的这三个文件去这里下载
//前两个
[下载地址 ](http://reactjs.cn/react/docs/getting-started-zh-CN.html)
//第三个babel的文件 直接保存文件就行
//https://npmcdn.com/babel-core@5.8.38/browser.min.js
//把这个js保存一下
//三个文件就齐了
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
第一个js
/** * Created by liuml on 2017/4/25. */
//React.js
//React 组件化(组件的重用) 自定义一个组件
//自定义组件
class HelloReact extends React.Component {
//组件的内容
render() {
return <div>
Hello React!
</div>;
}
}
//自定义组件
class HelloReact extends React.Component {
//组件的内容
render() {
return <div>
Hello<i> React!</i>
</div>;
}
}
//使用自定义的组件
//绘制到页面中
ReactDOM.render(<HelloReact></HelloReact>,document.body);
//下一个例子 包含 组件的重用
class ChildText extends React.Component {
//组件的内容
render() {
return <div>
Hello<b> React!</b>
</div>;
}
}
class WrapperText extends React.Component {
//组件的内容 虚拟dom(document object model)
//React自定义组件大写开头 html 标签小写开头
render() {
return <p>
<ChildText></ChildText>
<span>wrapperText</span>
</p>;
}
}
// 虚拟dom 跨平台
ReactDOM.render(<WrapperText></WrapperText>,document.body);
第二个js 案例
/** * Created by liuml on 2017/4/25. */
//案例: 点击切换 喜欢不喜欢
//标签属性命名,小驼峰命名规则
/*class Text extends React.Component { handlerClick() { alert("ok"); } render() { var like = "喜欢"; //通过状态改变text onclick 小驼峰命名 return <p onClick={this.handlerClick}>你{like}吗?</p> } } ReactDOM.render(<Text/>,document.getElementById("myDiv"));*/
var Text = React.createClass({
//设置状态的初始值
getInitialState: function () {
return {isLike: false};
},//逗号
//点击事件回调
handlerClick: function () {
//改变状态
this.setState({isLike: !this.state.isLike});
},render: function () {
//获取状态
/* var like ="喜欢"; if(this.isLike){ like ="不喜欢"; }else{ like ="喜欢"; }*/
var text = this.state.isLike ? "喜欢" : "不喜欢";
//通过状态改变text onclick 小驼峰命名
return <p onClick={this.handlerClick}>你{text}吗?</p>
}
});
ReactDOM.render(<Text/>,document.getElementById("myDiv"));
//加载流程：
//1.getInitialState（初始化，设置组件的state的值，给了一个对象）
//2.render（不喜欢）
//点击之后的流程
//1.handleClick（点击回调）
//2.setState（改变状态）
//3.render（喜欢）
第三个js
//props 例子 通过属性传参
var Text = React.createClass({
render: function () {
return <p> I love {this.props.name}</p>
}
});
ReactDOM.render(<Text name="test"/>,document.getElementById("myDiv"));
//props 更新子组件 而子组件只能通过 props 来传递数据。 案例 01 联动
//子组件
class TextComponent extends React.Component {
render() {
return <div>hello{this.props.text}!</div>
}
}
//父组件
var WrapperCompoent = React.createClass({
getInitialState: function () {
return {};
},//内容改变后回调
handlerChange: function () {
alert("变了");
},render: function () {
return <div>
<TextComponent/>
<input type="text" onChange={this.handlerChange}/>
</div>;
}
})
ReactDOM.render(<WrapperCompoent/>,document.getElementById("myDiv"));
//子组件
class TextComponent extends React.Component {
render() {
return <div>hello {this.props.text}!</div>
}
}
//props 子组件只能通过 props 来传递数据。 案例 02 event 联动
//父组件
var WrapperCompoent = React.createClass({
getInitialState: function () {
return {};
},//内容改变后回调
handlerChange: function (e) {
//e 是Event事件对象 targent 是指事件的目标对象
alert(e.target.value);
},document.getElementById("myDiv"));
//props 而子组件只能通过 props 来传递数据。 案例 03 event
//
var TextComponent = React.createClass({
render: function () {
return <div>Hello {this.props.text}!</div>;
}
});
var WrapperCompoent = React.createClass({
//state 初始化
getInitialState: function () {
return {text: ''};
},//内容改变后回调
handlerChange: function (e) {
//e 是Event事件对象 targent 是指事件的目标对象
// alert(e.target.value);
//改变状态
this.setState({text: e.target.value});
},render: function () {
return <div>
<TextComponent text={this.state.text}/>
<input type="text" onChange={this.handlerChange}/>
</div>;
}
})
ReactDOM.render(<WrapperCompoent/>,document.getElementById("myDiv"));
//传参流程
//1.handleChange（父组件回调）
//2.setState（修改父组件的状态）
//3.render（父组件重新渲染，子组件也会渲染）
//3.把父组件的状态值，作为子组件的属性值传入
//4.render（子组件内容改变）
第四个js
//React 组件的生命周期 var MyComponent = React.createClass({ //作用于组件类，只调用一次，返回对象用于设置默认的props getDefaultProps : function(){ console.log("getDefaultProps"); return {name:'null'}; },//作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state getInitialState : function(){ console.log("getInitialState"); return {count:0}; },//在完成首次渲染之前调用 componentWillMount : function(){ console.log("componentWillMount"); },//必选的方法，创建虚拟DOM // 只能通过this.props和this.state访问数据 // 可以返回null、false或任何React组件 // 只能出现一个顶级组件（不能返回数组） // 不能改变组件的状态 // 不能修改DOM的输出 render :() => {console.log("render"); return <div>MyComponent</div>;},//真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素 componentDidMount : function(){ console.log("componentDidMount"); },//组件接收到新的props时调用，并将其作为参数nextProps使用 componentWillReceiveProps : function(nextProps){ console.log("componentWillReceiveProps"); },//组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。 shouldComponentUpdate : function(){ console.log("shouldComponentUpdate"); return true; },//接收到新的props或者state后，进行渲染之前调用 componentWillUpdate : function () { console.log("componentWillUpdate"); },//完成渲染新的props或者state后调用，此时可以访问到新的DOM元素 componentDidUpdate : function () { console.log("componentWillUpdate"); },//组件被移除之前被调用，可以用于做一些清理工作 componentWillUnmount : function () { console.log("componentWillUnmount"); } }); ReactDOM.render(<MyComponent/>,document.getElementById("myDiv"));
