React学习小记
这段时间公司需要用到react+python来进行web开发，这不，上两个礼拜一直在学react和python相关知识，做出了一个小的demo-在线多人聊天室。对上面两种技术从无到有的理解，在做的过程中，也遇到了许许多多问题。虽然感觉基本入门了，但是感觉仍然需要来回顾一遍基础，这样能够更好的掌握。 这篇博文主要是个人对网上知识以及书上知识的总结。 什么是React?
其实到这里，可能对React的理解，就是一个js库嘛，根jquery一样都是个js库嘛，其实不然。
看了上面的特点，就感觉和jquery不同了吧，jquery更向一个工具包，而React才是一个真正的框架。 如何开始使用React一、在线直接引用： <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
二、通过npm安装 国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: $ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
然后： $ cnpm install [name]
然后在js里面这样引入： import React,{ Component } from 'react';
就可以在js使用React了。 ReactDOM.render()方法ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。 <div id="example"></div>
<script type="text/babel"> ReactDOM.render( <h1>Hello,world!</h1>,document.getElementById('example') ); </script>
React JSX
上面是jsx的基本特性，下面则是一些具体用法注意事项： ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>,document.getElementById('example')
);
注释需要写在花括号中，实例如下： ReactDOM.render(
<div>
<h1>anLA的博客</h1>
{/*注释...*/}
</div>,document.getElementById('example')
);
React渲染html组件和React组件方式： var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement,document.getElementById('example'));
要渲染 React 组件，只需创建一个大写字母开头的本地变量。 var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement,document.getElementById('example'));
React State(状态)React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态(也就是改变当前component的state的值)，然后由于render方法里面有引用state的值，所以会自动调用render方法，进而渲染 UI，让用户界面和数据保持一致。这样以来，不需要程序员自己去操作DOM React Propsstate 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="Runoob" />,document.getElementById('example')
我们知道， var title = "anLA的博客";
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,},render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={title} />,document.getElementById('example')
);
当然不同需求的验证还有很多，这里就不一一列出来了。 props和state之间传递数据： var WebSite = React.createClass({
getInitialState: function() {
return {
name: "anLA的CSDN博客",site: "http://blog.csdn.net/anla_"
};
},render: function() {
return (
<div>
<Name name={this.state.name} />
<Link site={this.state.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
ReactDOM.render(
<WebSite />,document.getElementById('example')
);
对于Name和Link这两个组件来说，WebSite是他们的父组件，这个时候，按照编程习惯，都是在父组件里面传值，所以就定义了state的两个值， React组件APIReact组件分不同的类别主要有以下几种API：
几个注意的地方：
关于props: 关于forceUpdate： React组件的声明周期按照被加载的的过程来分，React主要包括以下几个声明周期：
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},handleChange: function(event) {
this.setState({value: event.target.value});
},render: function() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,document.getElementById('example')
);
React Refs获取真实DOMReact 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。当然你的组件要新加一个ref属性。 var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
},render: function() {
// 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick}
/>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,document.getElementById('example')
);
最后，还有几点需要注意的地方：
参考资料： （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |