概述
自身对React的简单理解,就是利用其ReactDOM.render() 方法,在方法内部添加修改结点元素或者JS表达式,并把它们部署到某个元素中(渲染),集中对象化管理
实例
部署:
<body>
<div id="example"></div>
<script type="text/babel">
const element =<h1>Hello, world!</h1>;
ReactDOM.render(
element,
document.getElementById('example')
);
</script>
</body>
ReactDOM.render()方法就把修饰渲染过的Hello,world加入到div里了
这里const element声明的就是React元素
React JSX
上面
const element =<h1>Hello, world!</h1>
就是JSX,操作对象是结点元素,
还可以是JSP表达式,
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
var就是JS变量
组件
可以自己定义一个函数封装一些功能,作为一个组件模块随便被调用
<body>
<div id="example"></div>
<script type="text/babel">
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
</script>
</body>
就是一个组件的表示,可以像这样赋值
综合实例练习
react代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合嵌套组件</title>
<script src="../js/babel.min.js"></script>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/prop-types.js"></script>
</head>
<body>
<div id="Con"></div>
<script type="text/babel">
class App extends React.Component{
constructor(props) {
super(props);
this.state = {
todos:["游泳","打篮球","睡觉"]
}
this.addTodo=this.addTodo.bind(this)//每增加一个函数都要绑定一次
}
addTodo(todo){//添加数据进数组,todo是传进来的参数
const {todos}=this.state
todos.unshift(todo)//unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度
this.setState({todos})
}
render(){
const {todos}=this.state
return(
<div>
<h1>简单的事项操作</h1>
<Add count={todos.length} addTodo={this.addTodo}/>
<List todos={this.state.todos}/>
</div>
)
}
}
//从输入框添加数据
class Add extends React.Component{
constructor(props) {
super(props)
this.add=this.add.bind(this)
}
add(){
//读添加数据
const todo=this.todoInput.value.trim()
//检查输入合法性
if(!todo){
return
}
this.props.addTodo(todo)//类外声明全局可用,不过要用props调用
this.todoInput.value=''//输入添加完清空
}
render(){
return(
<div>
<input type="text" ref={input=>this.todoInput=input}/>
<button onClick={this.add}>Toadd {this.props.count}</button>
</div>
)
}
}
Add.prototypes={
count:PropTypes.number.isRequired,
addTodo:PropTypes.func.isRequired
}
class List extends React.Component{
render(){
const {todos}=this.props
return(
<ul>
{
todos.map((todo,index) => <li key={index}>{todo}</li>)
}
</ul>
)
}
}
List.prototypes={
todos:PropTypes.array.isRequired
}
ReactDOM.render(<App />,document.getElementById("Con"))
</script>
</body>
</html>