React快速掌握

最新推荐文章于 2024-04-11 18:01:30 发布

一杯甜咖啡

最新推荐文章于 2024-04-11 18:01:30 发布

阅读量164

点赞数

分类专栏：笔记文章标签： reactjs

本文链接：https://blog.csdn.net/db19981999/article/details/109092227

版权

笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

概述

自身对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>

一杯甜咖啡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React快速掌握

概述自身对React的简单理解，就是利用其ReactDOM.render() 方法，在方法内部添加修改结点元素或者JS表达式，并把它们部署到某个元素中（渲染）,集中对象化管理实例部署：<body><div id="example"></div><script type="text/babel">const element =<h1>Hello, world!</h1>;ReactDOM.render( elem
复制链接

扫一扫