React 特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。##虚拟DOM
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到【】复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了【单向】响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
1创建
可以引入文件 react.min.js 、react-dom.min.js 和 babel.min.js：
在这里我们使用webpack构建工具
打开cmd
$ cnpm install -g create-react-app
image.png
打开你想放的文件夹
$ create-react-app my-app
image.png
image.png
$ cd my-app 进入文件夹
$ npm start 启动
image.png
image.png
2使用
1)基本结构是
<div id="root"></div>
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('root')
);
可以演变成a)
<div id="root"></div>
<script src="index.js" ></script>
index.js
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('root')
);
可以演变成b)
<div id="root"></div>
app.js
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
index.js
ReactDOM.render(<App/>, document.getElementById('root')
);
至于怎么易于管理，就在【组件】里面讲啦
2)运算方式
放在花括号里，还可以进行简单的三元运算
ReactDOM.render(
<div>
<h1>{1+1}</h1>
<h2>{i == 1?'true':'false'}</h2>
</div>
,
document.getElementById('example')
);
3)样式
也放在大括号里
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
);
4)标签
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
5)常见错误
ReactDOM.render(
<div class="div1"> </div>
<div class="div2"> </div>
,
document.getElementById('example')
);
只能包含一个顶层标签，应该这样
ReactDOM.render(
<div class="divCon">
<div class="div1"> </div>
<div class="div2"> </div>
</div>
,
document.getElementById('example')
);
3.组件
1.创建
var Hellodiv = React.createClass({
render:function(){
return <h1>Hello World！</h1>;
}
});
ReactDOM(<Hellodiv />,document.getElementById('root'))
注意事项
在创建一个render时，自定义的 React 类名以大写字母开头,例如Hellodiv不能写成hellodiv
2.获取属性
属性data-为前缀添加
React内的元素通过this.prop.XX来获取
例如
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
var HelloMessage = React.createClass({
render: function() {
return （
<div>
<Link site={this.props.site} />
<h1>Hello {this.props.name}</h1>
</div>
）
}
});
ReactDOM.render(
<HelloMessage name="Runoob" site="http:www.baidu.com"/>,
document.getElementById('example')
);
也可以用getDefaultProps() 方法为 props 设置默认值
var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: 'Runoob'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
注意事项,在react属性中class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
4.状态
初始化相当于
var Hellodiv = React.createClass({
/*这个方法名称是已经定义好的，不能改名称。用于定义初始状态*/
getInitialState:function(){
return {redorblue:this.props.defaultColor};
},
render:function(){
return <h1>{redorblue}</h1>;
}
});
ReactDOM(<Hellodiv />,document.getElementById('root'))
5.React Props
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: 'Runoob'
};
},
getInitialState: function() {
return {
title: "菜鸟教程",
site: "http://www.runoob.com"
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
验证prop的存在
var title = "菜鸟教程";
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
}
。。。。
});
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);
如果title没有值就会浏览器报错了
image.png
6.组件API
好了，我们开始正式开始哈哈哈哈
React 组件 API
在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法:
设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted
setState：
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
squares: Array(9).fill(null),
xIsNext: true,
};
}
handleClick(i) {
const squares = this.state.squares.slice();
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
squares: squares,
xIsNext: !this.state.xIsNext,
});
}
7.React 组件生命周期
组件的生命周期可分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
网友评论